一次上传多个图像jquery

时间:2015-06-21 04:08:52

标签: php jquery

使用此脚本,我可以通过jquery上传图像但是如何一次上传多个图像?

另外,我如何收到php的所有图片?

由于

var inputFileImage = document.getElementById('image');
    var formElement = document.getElementById("RevisionTicket");
    var file = inputFileImage.files[0];
    var data = new FormData(formElement);
    data.append('image',file);
    var url = 'AprobarTicket2.php';
    $.ajax({
    url:url,
    type:'POST',
    contentType:false,
    data:data,
    processData:false,
    cache:false,
    beforeSend: function(){
                    $("body").addClass("loading"); 
                },
    success: function(data){
                    $("body").removeClass("loading");
                    //$("#contenidoSecPaginas").html(data);
                    alert(data);
    },
});

2 个答案:

答案 0 :(得分:0)

我认为你必须使用外部库来允许多文件上传 看下面的JS小提琴:

<input type="file" class="multi with-preview" multiple />

http://jsfiddle.net/fyneworks/2LLws/

它使用 https://rawgit.com/fyneworks/multifile/2.1.0-preview/jquery.MultiFile.js

还有许多其他项目可以上传多个文件,例如uploadify,dropzone js等。 祝你好运

以下是使用原生JS上传的示例:

http://www.appelsiini.net/2009/html5-drag-and-drop-multiple-file-upload

答案 1 :(得分:0)

$('#formId').on('submit', function(event){
 event.preventDefault();

  var form = document.querySelector('#yourFormId');
    var request = new XMLHttpRequest();
    var formData = new FormData(form);
    request.open('post','phpScriptToProcessForm.php');
    request.send(formData);

    request.onreadystatechange = function() {
        if (request.readyState === 4) {
            if (request.status === 200) {
                       // OK

                   } else {
                       // not OK
                   }
               }
           }; 

});

PHP:

/* Note your input name must be an array
*  e.g <input type="file" name="inputName[]" multiple> 
*/
$image = $_POST['inputName'];
for($i = 0; $i <= count($image); $i++){

 //Process images data, upload, insertion, etc...
}