我正在使用 razor View 开发 ASP.NET MVC3 应用程序。我正在尝试创建一个带有删除/上传选项的简单的自定义图像库。所有逻辑都在 @HTML.BeginForm
内部,因此只有在提交整个表单时才会将数据提交到服务器,在此之前我希望用户能够添加/删除图像而无需调用服务器。事实上,用户将看到 Delete
和 Upload
链接,但在提交整个表单之前,这两个链接不会对我的后端逻辑产生任何影响。
这就是为什么我想让用户浏览文件系统并添加/删除不同的图像,但是当他选择图像时我想将其显示在我的 span
标记中,仅此而已。
我可以附加到表单的图像数量有限,因此为了上传图像,我有以下内容:
@for (var i = ViewBag.PictureCount; i < Model[0].MCS_Documents.MaxPicCount; i++)
{
<span class="document-image-frame">
<a href="#" class="upload-document-image">Upload Image</a>
</span>
}
通过 jQuery,我想在这个 span
中显示所选的图像,但我不知道如何实现它。
即使很简单,我也有这个:
$('upload-document-image').click(function () {
//???
});
当用户单击“上传图像”时,我想打开一个文件对话框窗口,当他选择图像时,我想显示它,但不与服务器交互。
最佳答案
只有当客户端浏览器支持 HTML 5 File API
时,才可以在不与服务器交互的情况下实现此目的。 。因此,正如文档所示,您可以首先向 View 添加文件输入字段:
@for (var i = ViewBag.PictureCount; i < Model[0].MCS_Documents.MaxPicCount; i++)
{
<span class="document-image-frame">
<a href="#" class="upload-document-image">Upload Image</a>
<input type="file" accept="image/*" style="display:none" onchange="handleFiles(this)" />
</span>
}
然后我们可以连接 javascript:
$(function() {
$('.upload-document-image').click(function() {
$(this).next('input[type="file"]').trigger('click');
return false;
});
});
function handleFiles(fileInput) {
var files = fileInput.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /image.*/;
if (!file.type.match(imageType)) {
continue;
}
var img = document.createElement("img");
img.classList.add("obj");
img.file = file;
$(fileInput).after(img);
var reader = new FileReader();
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(file);
}
}
这是一个 live demo
.
如果客户端浏览器不支持 HTML 5 File API,您别无选择,只能将图像上传到服务器,并指向动态生成的 <img>
对其进行标记,以便可以显示预览。
关于jquery - 使用 jQuery 浏览文件系统并在跨度中显示图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17017457/