Question

我正在使用razor视图处理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 () {
    //???    
    });

当用户点击“上传图片”时，我想打开一个文件对话框窗口，当他选择我要显示的图片时，却没有与服务器进行交互。

Answer 1

仅当客户端浏览器支持HTML 5 File API时，才能在不与服务器交互的情况下实现此目的。因此，文档显示您可以首先在视图中添加文件输入字段：

@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文件API，您别无选择，只能将图像上传到服务器，并指向动态生成的<img>标记，以便可以显示预览

使用jQuery浏览文件系统并在span中显示图像

1 个答案: