0

加载页面后，我想多次将不同的图像上传到服务器。每次我选择图像时，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, 会阻止这种情况，但不幸的是，第一张图片被缓存了:(有什么办法解决这个问题吗？

4

1 回答 1

1

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

最好将整个封装到一个函数中，在传递所需参数时调用该函数。

此外，您还传递了一个新的 FormData(formData[0])，它也在我的测试中给出了错误。

这就是我想出的作品

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);
}
<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">

于 2015-03-25T11:55:57.780 回答