Question

我写了一个脚本，让用户提交带有图像的评论文本，我用ajax做了。

是 - 使用ajax上传图片。这不是拖累和滴...

我想扩展此scrpit并让用户上传多个文件/图片。我的代码不支持（服务器端只获得1个文件）。你可以帮我修复它，这样我就可以上传文件数组了吗？

HTML：

<form class="form-horizontal" action='#' method="post"  enctype="multipart/form-data">
    <input type='hidden' name='comment[pageName]' value='yard' class="pagename-field" />
    <input type='hidden' name='comment[refID]' value='0' class="refid-field" />
    <input type='hidden' name='allowReply' value='1' class="allowReply-field" />

    <textarea class="form-control comment-field" name="comment[text]" rows="1" placeholder="כתוב/י תגובה"></textarea>
    <input type='file' name='file[]' class='form-control file-field hideBox' maxlength='1' accept="image/jpg,image/png,image/jpeg,image/gif"  id="uploadFile0"/>

    <button class="btn btn-primary submit" >SUBMIT</button>
    <img src="images/loading.gif" align="absmiddle" class="loader" id="loader">
</form>

JS：

$(function() {
    $(document).on('submit','form',function(e) {
        e.preventDefault(); 

        var $form = $(this);
        var act = 'add';
        var file_data = $form.find('.file-field').prop('files')[0];   
        var form_data = new FormData();       
        form_data.append('act', act);
        form_data.append('comment[text]',  $form.find('.comment-field').val());   
        form_data.append('comment[pageName]',  $form.find('.pagename-field').val());   
        form_data.append('comment[refID]',  $form.find('.refid-field').val());            
        form_data.append('allowReply',  $form.find('.allowReply-field').val());            
        form_data.append('feel',  $form.find('.feel-field').val());            
        form_data.append('file[]', file_data);
        $("#loader").show();
    //  alert(form_data);

        $.ajax({
               type: "POST",
               url: "ajax/addComment.php",

               dataType: 'text',  
               cache: false,
               contentType: false,
               processData: false,  
               async: false,
               data: form_data,
               success: function(data)
               {
                    $("#loader").hide();
                    $('#commentsBox'+$form.find('.refid-field').val()).prepend(data);
                     $("form").reset(); 
               }

             });

        return false; // avoid to execute the actual submit of the form.
    });
});

Answer 1

你可以通过jQuery的<input type="file" name="multi_upload[]" multiple />对象来完成它。请参阅以下代码。

<强> HTML：

$(function() {
    $(document).on('submit','form',function(e) {
        var files = e.target.files;
        var data = new FormData();
        $.each(files, function (key, value)
        {
            data.append(key, value);
        });
        $.ajax({
            url: "your-url",
            type: 'POST',
            data: data,
            cache: false,
            processData: false, // Don't process the files
            contentType: false, // Set content type to false as jQuery will tell the server its a query string request
            success: function (data, textStatus, jqXHR)
            {
                alert("success");
            }
        });
    });
});

JQuery：

$tempfiles = $_FILES;
foreach ($tempfiles as $files) {
    $_FILES['multi_upload'] = $files;
    move_uploaded_file($_FILES['multi_upload']['tmp_name'],$_FILES['multi_upload']['name']);
}

<强> PHP：

var canvas = new Canvas(370, 120)
  , ctx = canvas.getContext('2d');

ctx.font = 'bold 30px unlearned';
ctx.fillText('foo', 25, 45);

使用ajax上传多个图像

1 个答案: