当前位置:首页 » 文件传输 » 上传多个文件
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

上传多个文件

发布时间: 2022-03-04 23:45:25

㈠ 利用多个input上传多个文件,服务器怎么处理

第一,客户端是没办法完成遍历本地文件夹的。用JS做这个操作不现实。
第二,你上传,也是先传到本地服务器,再通过FTP的方式用程序传到FTP服务器上去。这是两个步骤。

㈡ 如何通过js完成多个文件的上传

HTML5 file组件的新属性
accept : 如果在file组件中增加这个属性就可以直接控制上传的文件类型了,实在是很方便。
multiple:是否允许选择多个文件
HTML5 页面代码修改后

<img width="400" height="250"/><br />
<input type="file" id="pic" name="pic" onchange="printFileInfo()" accept="image/*" multiple="multiple"/>
<input type="button" value="上传图片" onclick="uploadFile()" /><br />
<div id="parent">
<div id="son"></div>
</div>

accept 的值可以参阅:IANA MIME 类型(标准 MIME 类型的完整列表),如果使用的是DW开发的话,软件本身就有提示。
如果选择了多个文件,可以用JS做循环打印,看看文件的名称,类型和大小,看演示代码

function printFileInfo(){

var picFile = document.getElementById("pic");
var files = picFile.files;
for(var i=0; i<files.length; i++){
var file = files[i];
var div = document.createElement("div")
div.innerHTML = "第("+ (i+1) +") 个文件的名字:"+ file.name +
" , 文件类型:"+ file.type +" , 文件大小:"+ file.size
document.body.appendChild( div)
}
}

既然可以循环多文件的话,就可以尝试多文件上传了。
1、首先创建 XMLHttpRequest 对象
//这是全局变量。因为是示例,所以就没有判断浏览器类型,低版本IE这么写的话会出问题的
var xhr = new XMLHttpRequest()
2、上篇介绍了进度事件(Progress) , 这次实现 progress 和 error 2个事件
error:在请求发生错误时触发。
对应上传时发生错误导致的上传失败:uploadFailed()
//上传失败
function uploadFailed(evt) {
alert("上传失败");
}
progress:在接收相应期间持续不断触发。

对应上传进度方法:onprogress()
/**
* 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
*/
function onprogress(evt){
var loaded = evt.loaded; //已经上传大小情况
var tot = evt.total; //附件总大小
var per = Math.floor(100*loaded/tot); //已经上传的百分比
$("#son").html( per +"%" );
$("#son").css("width" , per +"%");
}

最后就是上传方法了,注意上面的html代码中上传用的方法也需要改成这个uploadFile()方法才能正常使用。

//上传文件
function uploadFile() {
//将上传的多个文件放入formData中
var picFileList = $("#pic").get(0).files;
var formData = new FormData();
for(var i=0; i< picFileList.length; i++){
formData.append("file" , picFileList[i] );
}

//监听事件
xhr.upload.addEventListener("progress", onprogress, false);
xhr.addEventListener("error", uploadFailed, false);//发送文件和表单自定义参数
xhr.open("POST", "upload");
//记得加入上传数据formData
xhr.send(formData);
}

㈢ html有关多个文件上传

//改好了没问题..加文件试试
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script type="text/javascript">

function imgChange(next) {
if(next != null)
document.getElementById(next).style.display = "";
}

function validate() {
var phos = 2;
for(i = 0; i < 2; i++) {
if($("del" + i).checked == true)
phos--;
}
for(i = 0; i < 4; i++) {
if($("photoFile" + i).value != "")
phos++;
}
if(phos > 4) {
alert("图片太多,您最多总共可以保存4张图片!");
return false;
}
return true;
}
</script>

<form action="/addTrade.do" method="post" enctype="multipart/form-data" onSubmit="return validate()">
<!-- 上传照片-->
<div>

<table width="100%" border="0" cellspacing="0" cellpadding="0"
summary="upload pictures">
<tr id="tr_photoFile0">
<td width="119" align="right" class="title">
上传照片:
</td>

<td width="499">
<input type="file" name="photoFile0" id="photoFile0"
size="40" onChange='return imgChange("tr_photoFile1")' />
</td>
</tr>
<tr id="tr_photoFile1" style="display: none;">
<td>

</td>
<td>

<input type="file" name="photoFile1" id="photoFile1"
onChange='return imgChange("tr_photoFile2")' size="40" />
</td>
</tr>
<tr id="tr_photoFile2" style="display: none;">
<td>

</td>
<td>
<input type="file" name="photoFile2" id="photoFile2"
onChange='return imgChange("tr_photoFile3")' size="40" />

</td>
</tr>
<tr id="tr_photoFile3" style="display: none;">
<td>

</td>
<td>
<input type="file" name="photoFile3" id="photoFile3"
onChange='return imgChange(null)' size="40" />
</td>

</tr>
</table>
</div>

<!--/ 上传照片-->
<input name="submit" type="submit" value="提交"/>
</form>

㈣ 百度云能不能同时上传多个文件

可以同时上传多个文件。把你需要上传的文件全部选定,然后就会被依次上传,希望可以帮到你

㈤ FTP可以一次上传多个文件吗

很难明白你的意思, 上传的时候直接吧所有文件拖到上传的界面就可以上传了,或者一个个上传都是可以的,不懂你的放在一个域名是什么意思,文件都是放在文件夹下面的

㈥ file控件怎么上传多个文件

File控件是一个必须结合服务器端功能才能实现的纯客户端控件。

要使得文件上载能够成功,要做到以下几点:

INPUT type=file 元素必须出现在 FORM 元素内。
必须为 INPUT type=file 元素指定 NAME 标签属性的值。
FORM 元素 METHOD 标签属性的值必须设置为 post。
FORM 元素 ENCTYPE 标签属性的值必须设置为 multipart/form-data。
要处理上载到服务器的文件,服务器端进程必须可以处理 multipart/form-data 的提交。例如,Microsoft Posting Acceptor 能够允许 Microsoft Internet Information Server (IIS) 接受文件上载。而在网上也可找到其它的 Common Gateway Interface (CGI) 脚本用于处理 multipart/form-data 提交。

用户选择要上载的文件并提交页面后,该文件作为请求的一部分上载。文件将被完整地缓存在服务器内存中。

File控件一次只能上传一个文件,并且其文件属性值都是只读的。采用File控件同时上传多个文件,实际上是动态生成多个File控件,每选择上传一个文件,隐藏该控件,生成另一个File控件。这里只需要简单的JavaScript技巧既可以实现,所以不做赘述。

以ASP.NET为例,介绍在服务器端所需要进行的处理。

//获取上传文件列表

HttpFileCollection fileCollection = HttpContext.Current.Request.Files;

//逐个上传每个文件
for (int index = 0; index < HttpContext.Current.Request.Files.Count; index++)
{
HttpPostedFile postedFile = HttpContext.Current.Request.Files[index];
filename = postedFile.FileName;
if (postedFile.FileName != "")
{
postedFile.SaveAs(uploadPath);
}
}

㈦ 论文指导如何上传多个文件

一般选择文件的时候按住ctrl键然后选择,可以选择多个,但是有的不可以,因为网站机制限制一次只能传一个,有的网站也可以拖拽文件达到上传多个文件

㈧ 怎么能把多个文件夹的图片一起上传

新建一个文件夹,将多个图片复制进来,然后压缩这个文件夹,之后,就可以上传了。补充:用搜索命令,在查找文件区域,给出指定范围,这样可以一下子查到你要上传的多个图片。

㈨ 怎么在form里分别上传多个文件,如图

可以用iframe上传,orm表单的method、 enctype属性必须和下面代码一样。然后将target的值设为iframe的name,这样就可以实现无刷新上传文件。
<form action="uploadfile.php" enctype="multipart/form-data" method="post" target="iframeUpload">
<iframe name="iframeUpload" src="" width="350" height="35" frameborder=0 SCROLLING="no" style="display:NONE"></iframe>
<input id="test_file" name="test_file" type="file">
<input value="上传文件" type="submit">
</form>