Question

加载页面后，我想多次将不同的图像上传到服务器。每次我选择图像时，ajax都会将其上传到服务器，然后在屏幕上显示。问题是它在我逐个选择后继续上传其余图像，但每次在屏幕上只显示图像N1。

脚本：

..............    

On File input box change
    var file = this.files[0];
then run ajax
$.ajax({
                    url: "/users/img_upload", 
                    type: "POST", 
                    data: new FormData(formdata[0]),
                    contentType: false,
                    cache: false,
                    processData:false,
                    success: function(data)
                    {
                        var reader = new FileReader();
                        reader.readAsDataURL(file);
                        reader.onload = imageIsLoaded;

imageIsLoaded函数在这里

function imageIsLoaded(e) {
$('#img').attr('src', e.target.result);

现在我上传第一张图片后，即使在我上传第二张，第三张等后，它仍然只显示第一张图片。我认为cache: false,会阻止这一点但是，不幸的是第一张图片被缓存:(任何方式解决这个问题？

Answer 1

您依赖于全局文件对象。这不是真的可靠，因为你不知道变量会发生什么。

最好将整个信息包含在你传递所需参数的函数中。

你也传递了一个新的FormData（formData [0]），它也在我的测试中给出了错误。

这就是我想出来的作品

＆＃13;

function runme(files) {
    formData = new FormData();
    $.each(files, function(key, value)
    {
        formData.append(key, value);
    });
    formData.append('userpic', file, 'upload.jpg');
               $.ajax({
                    url: "/users/img_upload", 
                    type: "POST", 
                   data: formData,
                    contentType: false,
                    cache: false,
                    processData:false,
                    success: function(data)
                    {
                        var reader = new FileReader();
                        reader.readAsDataURL(file);
                        reader.onload = imageIsLoaded;
                    },
                    error:function(data){
                        var reader = new FileReader();
                        reader.readAsDataURL(file);
                        reader.onload = imageIsLoaded;
                    }
            });
}

function imageIsLoaded(e) {
$('#img').attr('src', e.target.result);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" onchange="runme(this.files);">
    <img src="#" id="img">

＆＃13;

阻止浏览器缓存上传图像

1 个答案: