仅用于UI的jQuery文件上传？

Question

我想上传多个文件。用例是：我网站上的用户可以上传多张照片。

现在我只是用

<input type="file" name="myfiles" multiple="multiple"> 

这种运作良好，但我想要更多。我想要一个漂亮的界面，向用户显示上传的内容，并更清楚地了解哪些文件正在上传。

https://github.com/blueimp/jQuery-File-Upload 

所以这个blueimp jquery文件上传脚本有美丽的用户界面，正是我所期待的。但有几个问题：

1）我想提交表单到一个PHP文件，这将决定如果文件上传或不。

2）我的表单有许多（很多..）其他字段。我希望通过简单的旧帖子提交按钮以及我的表单的其余部分提交。这可能吗？

如果没有，有人可以推荐更好的选择吗？

谢谢！

Answer 1

上述所有内容都可以使用blueimp文件上传插件。

1）决定，如果文件被上传或不

使用add:选项的插件制作一个单独的Ajax调用与添加的文件名的服务器，并使用响应过滤的文件列表是上传。

2）从窗体添加其他数据上传

使用的插件添加等领域，在形式的formData:选项传递给在提交服务器。

所以像下面这样：

$('#fileupload').fileupload({ 
     url: url, 
     dataType: 'json', 
     autoUpload: false, 
     acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i, 
     maxFileSize: 5000000, // 5 MB 
     loadImageMaxFileSize: 15000000, // 15MB 
     formData: $("#myForm").serializeArray() 
    }).on('fileuploadadd', function (e, data) { 
     data.context = $('<div/>').appendTo('#files'); 

     $.ajax(
       url: "/checkfiles", 
       data: { files: data.files }, 
       success: function(result) { 
        // assume server passes back list of accepted files 
        $.each(result.files, function (index, file) { 
        var node = $('<p/>') 
         .append($('<span/>').text(file.name)); 
        if (!index) { 
         node 
         .append('<br>') 
         .append(uploadButton.clone(true).data(data)); 
        } 
        node.appendTo(data.context); 
        }); 
       } 
    }).on('fileuploadprocessalways', function (e, data) { 
     var index = data.index, 
      file = data.files[index], 
      node = $(data.context.children()[index]); 
     if (file.preview) { 
      node 
       .prepend('<br>') 
       .prepend(file.preview); 
     } 
     if (file.error) { 
      node 
       .append('<br>') 
       .append(file.error); 
     } 
     if (index + 1 === data.files.length) { 
      data.context.find('button') 
       .text('Upload') 
       .prop('disabled', !!data.files.error); 
     } 
    }).on('fileuploaddone', function (e, data) { 
     $.each(data.result.files, function (index, file) { 
      var link = $('<a>') 
       .attr('target', '_blank') 
       .prop('href', file.url); 
      $(data.context.children()[index]) 
       .wrap(link); 
     }); 
    }).on('fileuploadfail', function (e, data) { 
     $.each(data.result.files, function (index, file) { 
      var error = $('<span/>').text(file.error); 
      $(data.context.children()[index]) 
       .append('<br>') 
       .append(error); 
     }); 
    }); 
});