所有文件都没有使用jquery从文件上传控件获取(All files are not getting from file upload control using jquery)

所有文件都没有使用jquery从文件上传控件获取(All files are not getting from file upload control using jquery)

我在图片上传过程中遇到问题。

我的表单中有一个输入类型文件控件，可以使用jquery添加更多输入控件。 问题是：当我获得所有这些控制值时，它只返回文件控件中的第一个值。 如何在所有控件中获取所有添加的文件？ 这是我的代码：

使用Javascript

$(document).ready(function() { $('#add_more').click(function() { $(this).before($("<div/>", { id: 'filediv' }).fadeIn('slow').append( $("<input/>", { name: 'file[]', type: 'file', id: 'file', accept: '.jpg, .jpeg, .gif' }), $("<br/><br/>") )); }); $('#upload').click(function(e) { var name = $(":file").val(); if (!name) { alert("File Must Be Selected"); e.preventDefault(); } else { //upload all images var fileData = $('#file').prop("files")[0]; var form_data = new FormData(); form_data.append('file', fileData); $.ajax({ url: "myurl.php", dataType: 'text', data: form_data, cache: false, contentType: false, processData: false, type: "post", error: function() { alert('error'); }, success: function(ret) { alert('sucess'); } }); } } });

HTML

<form enctype="multipart/form-data" action="" method="post"> <hr/> <div id="filediv"> <input name="file[]" type="file" id="file" accept=".jpg, .gif, .jpeg" /> </div> <br/> <input type="hidden" value="" id="class" name="class"> <input type="button" id="add_more" class="upload" value="Add More Files" /> <input type="button" value="Upload File" name="submit" id="upload" class="upload" /> </form>

当我使用$_FILES['file']['name']从php获取帖子并使用count($_FILES['file']['name'])计数时，它返回1 。

当我进一步处理时，只有第一个文件上传到相应的文件夹中。 行var fileData = $('#file').prop("files")[0];可能有问题var fileData = $('#file').prop("files")[0]; 。

I am facing a problem during images upload.

I have an input type file control in my form and more input controls can be added using jquery. The problem is this: when I get all those control values, it only return the first value from file control. How can I get all added files in all control? Here is my code:

Javascript

$(document).ready(function() { $('#add_more').click(function() { $(this).before($("<div/>", { id: 'filediv' }).fadeIn('slow').append( $("<input/>", { name: 'file[]', type: 'file', id: 'file', accept: '.jpg, .jpeg, .gif' }), $("<br/><br/>") )); }); $('#upload').click(function(e) { var name = $(":file").val(); if (!name) { alert("File Must Be Selected"); e.preventDefault(); } else { //upload all images var fileData = $('#file').prop("files")[0]; var form_data = new FormData(); form_data.append('file', fileData); $.ajax({ url: "myurl.php", dataType: 'text', data: form_data, cache: false, contentType: false, processData: false, type: "post", error: function() { alert('error'); }, success: function(ret) { alert('sucess'); } }); } } });

HTML

<form enctype="multipart/form-data" action="" method="post"> <hr/> <div id="filediv"> <input name="file[]" type="file" id="file" accept=".jpg, .gif, .jpeg" /> </div> <br/> <input type="hidden" value="" id="class" name="class"> <input type="button" id="add_more" class="upload" value="Add More Files" /> <input type="button" value="Upload File" name="submit" id="upload" class="upload" /> </form>

When I get the post from php using $_FILES['file']['name'] and counting it using count($_FILES['file']['name']) it returns 1.

When I process further, only the first file is uploaded in the corresponding folder. Something is probably wrong on line var fileData = $('#file').prop("files")[0];.

最满意答案

您的JS代码应如下所示：

$(document).ready(function () { $('#add_more').click(function () { $(this).before($("<div/>", { id: 'filediv' }).fadeIn('slow').append( $("<input/>", { name: 'file[]', type: 'file', // Id must be unique // id: 'file', class: "file_input", accept: '.jpg, .jpeg, .gif' }), $("<br/><br/>") )); }); $('#upload').click(function (e) { var boolAreAllFilesSelected = true; var objFormData = new FormData(); $.each($(":file"), function ( ) { if (!$(this).val()) { alert("File Must Be Selected"); $(this).focus(); return boolAreAllFilesSelected = false; } else { objFormData.append('file[]', $(this).prop("files")[0]); } }); if (boolAreAllFilesSelected) { $.ajax({ url: "myurl.php", dataType: 'text', data: objFormData, cache: false, contentType: false, processData: false, type: "post", error: function () { alert('error'); }, success: function (ret) { alert('sucess'); } }); } }); });

您的PHP代码应如下所示：

<?php function uploadSingleImage($arrSingleFile = array()) { if (!empty($arrSingleFile)) { // Here your image uploading code } } if (!empty($_FILES['file'])) { $arrFile = $_FILES['file']; foreach ($arrFile['name'] as $intIndex => $strName) { $arrSingleFile["name"] = $strName; $arrSingleFile["type"] = $arrFile['type'][$intIndex]; $arrSingleFile["tmp_name"] = $arrFile['tmp_name'][$intIndex]; $arrSingleFile["error"] = $arrFile['error'][$intIndex]; $arrSingleFile["size"] = $arrFile['size'][$intIndex]; uploadSingleImage($arrSingleFile); } } else { die("You have not uploaded any file."); }

Your JS Code should be as below :

$(document).ready(function () { $('#add_more').click(function () { $(this).before($("<div/>", { id: 'filediv' }).fadeIn('slow').append( $("<input/>", { name: 'file[]', type: 'file', // Id must be unique // id: 'file', class: "file_input", accept: '.jpg, .jpeg, .gif' }), $("<br/><br/>") )); }); $('#upload').click(function (e) { var boolAreAllFilesSelected = true; var objFormData = new FormData(); $.each($(":file"), function ( ) { if (!$(this).val()) { alert("File Must Be Selected"); $(this).focus(); return boolAreAllFilesSelected = false; } else { objFormData.append('file[]', $(this).prop("files")[0]); } }); if (boolAreAllFilesSelected) { $.ajax({ url: "myurl.php", dataType: 'text', data: objFormData, cache: false, contentType: false, processData: false, type: "post", error: function () { alert('error'); }, success: function (ret) { alert('sucess'); } }); } }); });

Your PHP Code should be as below :

<?php function uploadSingleImage($arrSingleFile = array()) { if (!empty($arrSingleFile)) { // Here your image uploading code } } if (!empty($_FILES['file'])) { $arrFile = $_FILES['file']; foreach ($arrFile['name'] as $intIndex => $strName) { $arrSingleFile["name"] = $strName; $arrSingleFile["type"] = $arrFile['type'][$intIndex]; $arrSingleFile["tmp_name"] = $arrFile['tmp_name'][$intIndex]; $arrSingleFile["error"] = $arrFile['error'][$intIndex]; $arrSingleFile["size"] = $arrFile['size'][$intIndex]; uploadSingleImage($arrSingleFile); } } else { die("You have not uploaded any file."); }