2011-11-15 11 views
4

複数のファイルのページを作成するWebアプリケーションを開発しています 一度に1つのファイルではなく1つのブラウズでアップロードします。jqueryまたはJavaScriptを使用して1つのブラウズで複数のファイルをアップロードするには

ユーザーは、参照をクリックすると複数のファイルを選択できます。

いくつかのいずれかが、このためのソリューションを持っている場合は

感謝を歓迎してください!

+0

ます。http:// blueimp .github.io/jQuery-File-Upload/ – Lamy

答えて

3

Uploadifyのようなプラグインを使用することができ、ファイルのアップロードのための非常に良いjQueryのプラグインです。

非常に使いやすいです。ドキュメントから:

$(document).ready(function() { 
    $('#file_upload').uploadify({ 
    'uploader' : '/uploadify/uploadify.swf', 
    'script' : '/uploadify/uploadify.php', 
    'cancelImg' : '/uploadify/cancel.png', 
    'folder' : '/uploads', 
    'auto'  : true 
    }); 
}); 

次にあなたがHTMLに必要なのは、次のとおりです。

<input id="file_upload" name="file_upload" type="file" /> 

明らかにすぎUploadifyスクリプトを含みます。

0

あなたは、複数のファイルをアップロードするにはJQueryを使用してこれを行うことができますが、私はあまりにも彼らのフォーラムで、前のサポートをたくさんjQueryのUploadifyを使用しました。このuploadify

3

を参照してください!代替ソリューションについては

http://www.uploadify.com/

+0

Flashを使用しないオプションがありますか? – Stefan

+0

ここにmooToolsフレームワークを使用したバージョンがあります。http://the-stickman.com/web-development/javascript/upload-multiple-files-with-a-single-file-element/ –

+0

これは古いスレッドであることがわかりますが、 UploadiFiveという名前のUploadifyにはHTML5の代替手段があります。私は4年前に既にソリューションを見つけたと確信していますが、これは将来の読者に役立つでしょう:http://www.uploadify.com/download/download-uploadifive-standard/ –

6

、あなたはHTML5のマルチアップロードを使用することができ、

HTML

セットは、このリンクhttps://developer.mozilla.org/en-US/docs/Web/API/Input.multiple

を確認し、あなたの入力ファイル用 複数属性
<form id="form-upload"> 
    <input type="file" name="upload" id="upload" multiple> 
</form> 

JS

jueryを使用してファイルをアップロードするには、フォーム・データを使用することができます。https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects

$('#upload').bind("change", function(){ 
    var formData = new FormData($("#form-upload")[0]); 
    //loop for add $_FILES["upload"+i] to formData 
    for (var i = 0, len = document.getElementById('upload').files.length; i < len; i++) { 
     formData.append("upload"+(i+1), document.getElementById('upload').files[i]); 
    } 

    //send formData to server-side 
    $.ajax({ 
     url : "process_upload.php", 
     type : 'post', 
     data : formData, 
     dataType : 'json', 
     async : true, 
     processData: false, // tell jQuery not to process the data 
     contentType: false, // tell jQuery not to set contentType 
     error : function(request){ 
      console.log(request.responseText); 
     }, 
     success : function(json){ 
      //place your code here 
     } 
    }); 
}); 

サーバ側(例:PHP)

//just print $_FILES 
print_r($_FILES); 
関連する問題