在我的一个页面上,我使用多个表单,每个表单都保存着特定的数据(所以有一个表单,用户的名字,姓氏等等,还有另一个用户的地址等等)。每个表单都有一个“保存更改”按钮,我使用Ajax调用将数据提交给服务器。问题是 - 在其中一种形式中,用户可以使用Bootstrap文件上传来上传他的图片(所以,首先他选择图片,然后单击“保存” - 只有文件发送到服务器),但是我不能找到任何方式来做到这一点,而无需重新加载页面。上传没有页面刷新的选定图片
首先我尝试使用隐藏的iframe
,但似乎我无法将我的文件数据复制到Iframe,所以这是不行的。
现在我想要使用此:
但是,一旦我有它在我的网页,引导文件上传停止正常工作,那就是 - 我每次自动选择一个图片吧开始文件上传。奇怪的部分是 - 即使没有用于fileuploader的init代码,它也会发生,只是包含代码。我想建议“修复”,那就是 - 我想重写add方法是这样的:
$('#file').fileupload({
dataType: 'json',
add: function (e, data) {
data.context = $('<button/>').text('Upload')
.appendTo(document.body)
.click(function() {
data.context = $('<p/>').text('Uploading...').replaceAll($(this));
data.submit();
});
},
done: function (e, data) {
data.context.text('Upload finished.');
}
});
但“加”不击中出于某种原因...
什么我错在这里做?或者有什么其他的方式可以实现我想要的东西?
编辑1:
这里是我使用的图片上传代码:
@using (Html.BeginForm("ProfileSavePictureData", "Animator", FormMethod.Post, new { enctype = "multipart/form-data", id = "pictureDataForm" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(null, new { id = "profilePictureDataValidationSummary" })
@Html.HiddenFor(x => x.UserDataId)
@Html.HiddenFor(x => x.UserId)
<div class="form-group">
<div class="fileupload fileupload-new" data-provides="fileupload">
<input type="hidden" value="" name="" />
<div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
@if (Model == null || String.IsNullOrEmpty(Model.Picture))
{
<img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" alt="">
}
else
{
<img src="@Model.Picture" alt="@ViewBag.PictureNotAviableLabel" alt="">
@Html.HiddenFor(x => x.Picture)<br />
}
</div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px;
max-height: 150px; line-height: 2px;">
</div>
<div>
<span class="btn default btn-file"><span class="fileupload-new"><i class="fa fa-paper-clip">
</i>
@ViewBag.ChoosePicture
</span><span class="fileupload-exists"><i class="fa fa-undo"></i>
@ViewBag.ChangePicture
</span>
<input type="file" class="default" name="file" />
</span><a href="#" class="btn red fileupload-exists" data-dismiss="fileupload"><i
class="fa fa-trash-o"></i>
@ViewBag.RemovePicture
</a>
</div>
</div>
<span class="label label-danger">
@ViewBag.InfoLabel
</span><span>
@ViewBag.PictureMinatureWarning
</span>
</div>
<div class="margin-top-10">
<button id="btnSaveChengesProfilePictureData" type="button" class="btn btn-default">@ViewBag.SaveChangesButtonLabel</button>
<input type="submit" />
</div>
}
正如你可以看到有在底部两个按钮 - 既不是我想要做什么......
可以告诉你你的HTML代码?或创建jsfiddle? –
@TechnoKnol: 这将是很难Jsfiddle但请参阅我的编辑 - 我添加了负责图片上传的部分。希望这可以帮助。提前致谢。 – user2384366