僅用於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); 
     }); 
    }); 
});