下载多个文件 formData// 

var fd = new FormData//;

fd.append/"fileToUpload", document.getElementById/'fileToUpload'/.files[0]/;

var xhr = new XMLHttpRequest//;

xhr.open/"POST", "uph.php"/;

xhr.send/fd/;


uph.php:


var_dump/$_FILES['fileToUpload']/;


它有效，但显然，只为
files[0]

. 如何使其为所选文件工作？

我试着删除
[0]

, 但它没有工作。
2021-03-21 添加评论
分享

没有找到相关结果

    已邀请:

    冰洋

    赞同来自:

    您必须收到要添加到的文件的长度 JS, 然后发送它 AJAX 请求如下所示


    //JavaScript 
    
var ins = document.getElementById/'fileToUpload'/.files.length;
    
for /var x = 0; x < ins; x++/ {
    
 fd.append/"fileToUpload[]", document.getElementById/'fileToUpload'/.files[x]/;
    
}
    

    
//PHP
    
$count = count/$_FILES['fileToUpload']['name']/;
    
for /$i = 0; $i < $count; $i++/ {
    
 echo 'Name: '.$_FILES['fileToUpload']['name'][$i].'<br/>';
    
}
    2021-03-21 0 0
    分享

    风见雨下

    赞同来自:

    你需要去的道路 javascript:


    var data = new FormData//;
    

    
$.each/$/"input[type='file']"/[0].files, function/i, file/ {
    
 data.append/'file', file/;
    
}/;
    

    
$.ajax/{
    
 type: 'POST',
    
 url: '/your/url',
    
 cache: false,
    
 contentType: false,
    
 processData: false,
    
 data : data,
    
 success: function/result/{
    
 console.log/result/;
    
 },
    
 error: function/err/{
    
 console.log/err/;
    
 }
    
}/


    如果你打电话 data.append/'file', file/ 几次，您的请求将包含您的文件数组。

    使用 node.js 和复合中间Multer处理程序，以获得数据如下：


    router.post/'/trip/save', upload.array/'file', 10/, function/req, res/{
    
 // Your array of files is in req.files
    
}
    2021-03-21 0 0
    分享

    石油百科

    赞同来自:

    你只需要使用
    fileToUpload[]

    反而
    fileToUpload

    :


    fd.append/"fileToUpload[]", document.getElementById/'fileToUpload'/.files[0]/;


    它将返回具有多个名称，大小等的数组。
    2021-03-21 0 0
    分享

    江南孤鹜

    赞同来自:

    它为我工作：


    let formData = new FormData//
    
formData.append/'files', file1/
    
formData.append/'files', file2/
    2021-03-21 0 0
    分享

    知食

    赞同来自:

    它为我工作了


    //Javascript part
    
//file_input is a file input id
    
var formData = new FormData//;
    
var filesLength=document.getElementById/'file_input'/.files.length;
    
for/var i=0;i<fileslength;i++ "-"="" "."="" "file[]",="" "ymdhis"="" $.ajax="" $_files["file"]["tmp_name"][$i],="" $absolute_destination="" $extension='end/explode/".",' $extension;="" $file_name="" $file_names="" $file_url="" $i="" $i++="" $original_file_name="pathinfo/$file_name," 'file_input'="" 'post',="" 'upload.php',="" .="" .files[i]="" ;="" ;[="" <="" [code]<?php="" cache:="" code]="" contenttype:="" count="" data:="" date="" div="" document.getelementbyid="" false,="" for="" formdata,="" formdata.append="" function="" html="" move_uploaded_file="" part="" pathinfo_filename="" php="" processdata:="" success:="" type:="" url:="" {="" }="" }[="">
    
<div class="answer_text">
    
它很棒 !
    

    

    
[code]var fd = new FormData//;
    

    
$/'input[type="file"]'/.on/'change', function /e/ {
    
 [].forEach.call/this.files, function /file/ {
    
 fd.append/'filename[]', file/;
    
 }/;
    
}/;
    

    
$.ajax/{
    
 url: '/url/to/post/on',
    
 method: 'post',
    
 data: fd,
    
 contentType: false,
    
 processData: false,
    
 success: function /response/ {
    
 console.log/response/
    
 },
    
 error: function /err/ {
    
 console.log/err/;
    
 }
    
}/;


    </div>
    <div class="answer_text">
    我为自己找到了这份工作！


    var fd = new FormData//;
    
$.each/$/'.modal-banner [type=file]'/, function/index, file/ {
    
 fd.append/'item[]', $/'input[type=file]'/[index].files[0]/;
    
}/;
    

    
$.ajax/{
    
 type: 'POST',
    
 url: 'your/path/', 
    
 data: fd,
    
 dataType: 'json',
    
 contentType: false,
    
 processData: false,
    
 cache: false,
    
 success: function /response/ {
    
 console.log/response/;
    
 },
    
 error: function/err/{
    
 console.log/err/;
    
 }
    
}/.done/function// {
    
 // do something....
    
}/;
    
return false;


    </div>
    <div class="answer_text">
    用表单数据下载多个文件 angular, 确保他们在你的 component.html

    下载Document.


    <div class="row">
    
<div class="col-md-4">
    
   <small class="text-center"> Driver Photo</small>
    
<div class="form-group">
    
<input "="" $event,="" 'profilepic'="" ="onfileselected="" change="" class="form-control" type="file"/>
    
</div>
    
</div>
    
<div class="col-md-4">
    
   <small> Driver ID</small>
    
<div class="form-group">
    
<input "="" $event,="" 'id'="" ="onfileselected="" change="" class="form-control" type="file"/>
    
</div>
    
</div>
    
<div class="col-md-4">
    
   <small>Driving Permit</small>
    
<div class="form-group">
    
<input "="" $event,="" 'drivingpermit'="" ="onfileselected="" change="" class="form-control" type="file">
    
</input></div>
    
</div>
    
</div>
    
<div class="row">
    
<div class="col-md-6">
    
   <small>Car Registration</small>
    
<div class="form-group">
    
<div class="input-group mb-4">
    
<input "="" $event,="" 'carregistration'="" ="onfileselected="" change="" class="form-control" type="file"/> <br/>
    
</div>
    
</div>
    
</div>
    
<div class="col-md-6">
    
<small id="li"> Car Insurance</small>
    
<div class="form-group">
    
<div class="input-group mb-4">
    
<input "="" $event,="" 'insurancedocs'="" ="onfileselected="" change="" class="form-control" type="file"/>
    
</div>
    
</div>
    
</div>
    
</div>
    
<div class="modal-footer" style="align-items:c">
    
<button class="btn btn-secondary" data-="" dismiss="modal" type="button">Close</button>
    
<button "="" ="uploadfiles="" class="btn btn-primary" click="">Upload 
    
 Files</button>
    
</div>


    在您的文件中
    componenet.ts 声明如下所选文件数组。


    selectedFiles = [];


    // 选定文件数组


    onFileSelected/event, type/ {
    
 this.selectedFiles.push/{ type, file: event.target.files[0] }/;
    
 }


    //in 方法 upload files, 按如下方式添加表单数据。


    uploadFiles// {
    
 const formData = new FormData//; 
    

    
 this.selectedFiles.forEach/file =&gt; {
    
 formData.append/file.type, file.file, file.file.name/; 
    
 }/;
    
 formData.append/"driverid", this.driverid/;
    

    
 this.driverService.uploadDriverDetails/formData/.subscribe/
    
 res =&gt; {
    
 console.log/res/; 
    

    
 },
    
 error =&gt; console.log/error.message/
    
 /;
    
 }


    NOTE: 我希望这项决定将为您工作，朋友们
    </div>
    <div class="answer_text">
    创建对象
    FormData



    const formData: any = new FormData//;


    并附着在一起 keyName


    photos.forEach//_photoInfo: { localUri: string, file: File }/ =&gt; {
    
 formData.append/"file", _photoInfo.file/;
    
}/;


    并将其发送到服务器


    // angular code
    
this.http.post/url, formData/


    这将自动创建一个对象数组
    file


    如果您正在使用 nodejs


    const files :File[] = req.files ? req.files.file : null;


    </div>
    <div class="answer_text">
    这是解决方案 Vanilla

    JavaScript 对于这个问题 -

    首先，我们将使用该方法
    Array.prototype.forEach//

    , 作为


    document.querySelectorAll/'input[type=file]'/

    回报

    按摩类型 object

    .

    然后我们将使用该方法
    Function.prototype.call//

    , 分配每个元素

    双臂状物体

    价值
    this

    在方法中
    .forEach

    .

    HTML


    <form id="myForm">
    
<input id="myFile_1" name="myFile" type="file"/>
    
<input id="myFile_2" name="myFile" type="file"/>
    
<input id="myFile_3" name="myFile" type="file"/>
    
<button onclick="saveData//" type="button">Save</button>
    
</form>


    JavaScript


    function saveData//{
    
 var data = new FormData/document.getElementById/"myForm"//;
    
 var inputs = document.querySelectorAll/'input[type=file]'/;
    

    
 Array.prototype.forEach.call/inputs[0].files, function/index/{
    
 data.append/'files', index/;
    
 }/;
    
 console.log/data.getAll/"myFile"//;
    
}


    您可以查看相同的工作示例
    https://codepen.io/bappidas/pen/BaabxrX
    </div>
    </fileslength;i++>
    2021-03-21 0 0
    分享

    卫东

    赞同来自:

    它很棒 !


    var fd = new FormData//;
    

    
$/'input[type="file"]'/.on/'change', function /e/ {
    
 [].forEach.call/this.files, function /file/ {
    
 fd.append/'filename[]', file/;
    
 }/;
    
}/;
    

    
$.ajax/{
    
 url: '/url/to/post/on',
    
 method: 'post',
    
 data: fd,
    
 contentType: false,
    
 processData: false,
    
 success: function /response/ {
    
 console.log/response/
    
 },
    
 error: function /err/ {
    
 console.log/err/;
    
 }
    
}/;
    2021-03-21 0 0
    分享

    裸奔

    赞同来自:

    我为自己找到了这份工作！


    var fd = new FormData//;
    
$.each/$/'.modal-banner [type=file]'/, function/index, file/ {
    
 fd.append/'item[]', $/'input[type=file]'/[index].files[0]/;
    
}/;
    

    
$.ajax/{
    
 type: 'POST',
    
 url: 'your/path/', 
    
 data: fd,
    
 dataType: 'json',
    
 contentType: false,
    
 processData: false,
    
 cache: false,
    
 success: function /response/ {
    
 console.log/response/;
    
 },
    
 error: function/err/{
    
 console.log/err/;
    
 }
    
}/.done/function// {
    
 // do something....
    
}/;
    
return false;
    2021-03-21 0 0
    分享

    窦买办

    赞同来自:

    用表单数据下载多个文件 angular, 确保他们在你的 component.html

    下载Document.


    <div class="row">
    
<div class="col-md-4">
    
   <small class="text-center"> Driver Photo</small>
    
<div class="form-group">
    
<input "="" $event,="" 'profilepic'="" ="onfileselected="" change="" class="form-control" type="file"/>
    
</div>
    
</div>
    
<div class="col-md-4">
    
   <small> Driver ID</small>
    
<div class="form-group">
    
<input "="" $event,="" 'id'="" ="onfileselected="" change="" class="form-control" type="file"/>
    
</div>
    
</div>
    
<div class="col-md-4">
    
   <small>Driving Permit</small>
    
<div class="form-group">
    
<input "="" $event,="" 'drivingpermit'="" ="onfileselected="" change="" class="form-control" type="file">
    
</input></div>
    
</div>
    
</div>
    
<div class="row">
    
<div class="col-md-6">
    
   <small>Car Registration</small>
    
<div class="form-group">
    
<div class="input-group mb-4">
    
<input "="" $event,="" 'carregistration'="" ="onfileselected="" change="" class="form-control" type="file"/> <br/>
    
</div>
    
</div>
    
</div>
    
<div class="col-md-6">
    
<small id="li"> Car Insurance</small>
    
<div class="form-group">
    
<div class="input-group mb-4">
    
<input "="" $event,="" 'insurancedocs'="" ="onfileselected="" change="" class="form-control" type="file"/>
    
</div>
    
</div>
    
</div>
    
</div>
    
<div class="modal-footer" style="align-items:c">
    
<button class="btn btn-secondary" data-="" dismiss="modal" type="button">Close</button>
    
<button "="" ="uploadfiles="" class="btn btn-primary" click="">Upload 
    
 Files</button>
    
</div>


    在您的文件中
    componenet.ts 声明如下所选文件数组。


    selectedFiles = [];


    // 选定文件数组


    onFileSelected/event, type/ {
    
 this.selectedFiles.push/{ type, file: event.target.files[0] }/;
    
 }


    //in 方法 upload files, 按如下方式添加表单数据。


    uploadFiles// {
    
 const formData = new FormData//; 
    

    
 this.selectedFiles.forEach/file => {
    
 formData.append/file.type, file.file, file.file.name/; 
    
 }/;
    
 formData.append/"driverid", this.driverid/;
    

    
 this.driverService.uploadDriverDetails/formData/.subscribe/
    
 res => {
    
 console.log/res/; 
    

    
 },
    
 error => console.log/error.message/
    
 /;
    
 }


    NOTE: 我希望这项决定将为您工作，朋友们
    2021-03-21 0 0
    分享

    三叔

    赞同来自:

    创建对象
    FormData



    const formData: any = new FormData//;


    并附着在一起 keyName


    photos.forEach//_photoInfo: { localUri: string, file: File }/ => {
    
 formData.append/"file", _photoInfo.file/;
    
}/;


    并将其发送到服务器


    // angular code
    
this.http.post/url, formData/


    这将自动创建一个对象数组
    file


    如果您正在使用 nodejs


    const files :File[] = req.files ? req.files.file : null;
    2021-03-21 0 0
    分享

    冰洋

    赞同来自:

    这是解决方案 Vanilla

    JavaScript 对于这个问题 -

    首先，我们将使用该方法
    Array.prototype.forEach//

    , 作为


    document.querySelectorAll/'input[type=file]'/

    回报

    按摩类型 object

    .

    然后我们将使用该方法
    Function.prototype.call//

    , 分配每个元素

    双臂状物体

    价值
    this

    在方法中
    .forEach

    .

    HTML


    <form id="myForm">
    
<input id="myFile_1" name="myFile" type="file"/>
    
<input id="myFile_2" name="myFile" type="file"/>
    
<input id="myFile_3" name="myFile" type="file"/>
    
<button onclick="saveData//" type="button">Save</button>
    
</form>


    JavaScript


    function saveData//{
    
 var data = new FormData/document.getElementById/"myForm"//;
    
 var inputs = document.querySelectorAll/'input[type=file]'/;
    

    
 Array.prototype.forEach.call/inputs[0].files, function/index/{
    
 data.append/'files', index/;
    
 }/;
    
 console.log/data.getAll/"myFile"//;
    
}


    您可以查看相同的工作示例
    https://codepen.io/bappidas/pen/BaabxrX
    2021-03-21 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    Copyright © 2023, All Rights Reserved