duansha6410 2016-12-06 13:01
浏览 58

如何使用FormData()jquery提交动态文件类型并在php中接收它

For single file upload it's working fine, see below example

<input name="audio_preview" id="audio_preview" type="file">

var formData = new FormData();
var audio_preview = document.getElementById('audio_preview');
var audio_preview_file = audio_preview.files[0];
formData.append('audio_preview', audio_preview_file);

Now receive it in php

[audio_preview] => Array
     (
       [name] => bawa_sus-bawa_sus-10511_hifi.mp3
       [type] => audio/mpeg
       [tmp_name] => /customers/4/6/d/domain.com/tmp/phpUTkVgr
       [error] => 0
       [size] => 116737
      )

Above code is working fine, but now i want to submit dynamic file input field, check below code

<input name="download_files[]" type="file">
<input name="download_files[]" type="file">
<input name="download_files[]" type="file">
<input name="download_files[]" type="file">

<script>
var allFiles = jQuery("input[name='download_files[]']");
 jQuery.each(allFiles,function(index, value){
    formData.append('download_files[]', value.files[0]);
 });
</script>

It sends below array

[download_files] => Array
        (
            [name] => Array
                (
                    [0] => ajax-loader.gif
                    [1] => already-subscribed-help.gif
                )

            [type] => Array
                (
                    [0] => image/gif
                    [1] => image/gif
                )

            [tmp_name] => Array
                (
                    [0] => /customers/4/6/d/domain.com/tmp/phpnd9czo
                    [1] => /customers/4/6/d/domain.com/tmp/phpNC4BlI
                )

            [error] => Array
                (
                    [0] => 0
                    [1] => 0
                )

            [size] => Array
                (
                    [0] => 19110
                    [1] => 7805
                )
          )
 )

AJAX

$.ajax({
            type: 'post',
            url: $form.attr('action'),
            data: formData,
            processData: false, // Don't process the files
            contentType: false,
            success: function(s) {
                alert('files uploaded');
                jQuery( '.wordpress-ajax-form' ).each(function(){
                    this.reset();
                });
                jQuery("#sucess").show().delay(4000).fadeOut();
            },
            error: function(xhr) {
                alert("An error occured files uploaded: " + xhr.status + " " + xhr.statusText);
            }
        });

How to submit files with FormData() using jQuery.

  • 写回答

1条回答

  • dq05304 2016-12-07 09:16
    关注

    Replace jQuery code inside script tag above like

    <script>
     jQuery.each($('input[name^="download_files"]')[0].files, function(i, file) {
         formData.append('download_files[]', file);
     });
    </script>
    
    评论

报告相同问题?

悬赏问题

  • ¥15 matlab有关常微分方程的问题求解决
  • ¥15 perl MISA分析p3_in脚本出错
  • ¥15 k8s部署jupyterlab,jupyterlab保存不了文件
  • ¥15 ubuntu虚拟机打包apk错误
  • ¥199 rust编程架构设计的方案 有偿
  • ¥15 回答4f系统的像差计算
  • ¥15 java如何提取出pdf里的文字?
  • ¥100 求三轴之间相互配合画圆以及直线的算法
  • ¥100 c语言,请帮蒟蒻写一个题的范例作参考
  • ¥15 名为“Product”的列已属于此 DataTable