html代码:

   <input type="file" id='upload' name="upload"  multiple="multiple" onchange="uploadFile(this);" style="display:none;" />
<button id='uploadbtn' class="rscUploadBtn" type="button" onclick="document.getElementById('upload').click();" >选择上传文件</button><br />

js代码:

        //file为input[type=file]元素,例如:onchange="uploadFile(this);"
function uploadFile(file) {
if (file && file.files && file.files.length > ) {
//创建一个FormData空对象,然后使用append方法添加key/value
var fd = new FormData();
for (var i = ; i < file.files.length; i++)
fd.append('file['+i+']',file.files[i]); fd.append("action", "filelistup"); var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == && xhr.status == ) {
var data = JSON.parse(xhr.responseText);
if (data.returnValue == ) {
//批量上传成功
//处理成功后的逻辑
//TODO:....... }
else alert(data.returnMsg);
}
} //侦查当前附件上传情况 可以设置进度条
xhr.upload.onprogress = function (evt) {
//var loaded = evt.loaded;//已经上传大小情况
//var tot = evt.total;//附件总大小
//var per = Math.floor(100 * loaded / tot); //已经上传的百分比,如35 } xhr.open("post", GetHost() + 'xxx/index.ashx');
xhr.send(fd);
}
}

c#接收文件代码:

     /// <summary>
/// 上传文件
/// </summary>
/// <param name="httpRequest"></param>
/// <param name="directoryName">保存文件的目录</param>
/// <param name="extList">需要接收文件的后缀名,用来过滤</param>
/// <param name="fileNames">接收成功后,保存文件的文件名</param>
/// <param name="errorMsg">错误消息</param>
/// <returns></returns>
public static bool UploadFile(HttpRequestBase httpRequest, string directoryName,List<string> extList,out List<string> fileNames, out string errorMsg) {
bool rc = false;
errorMsg = "";
string fileFullName = "";
fileNames = new List<string>(); try {
directoryName = (directoryName ?? "").Trim();
if (directoryName != "") {
//如果不存在该文件夹,则创建一个
if (!Directory.Exists(directoryName))
Directory.CreateDirectory(directoryName); //如果创建失败
if (!Directory.Exists(directoryName))
errorMsg = string.Format("创建文件夹{0}失败!", directoryName);
//存在该文件夹
else {
foreach (string upload in httpRequest.Files) {
if (!httpRequest.Files[upload].HasFile())
continue; //获取 上传文件的名称
string filename = Path.GetFileName(httpRequest.Files[upload].FileName);
//获取 上传文件的扩展名
string ext = Path.GetExtension(filename); //检查 文件扩展名
if (extList != null && extList.Count > ) {
if (!extList.Contains(ext)) {
errorMsg = string.Format("不支持{0}格式文件的上传!", ext);
return false;
}
} //使用guid当做当前文件的文件名
filename = Guid.NewGuid().ToString().Replace("-", "") + ext; //组合保存文件的全路径名
fileFullName = Path.Combine(directoryName, filename); httpRequest.Files[upload].SaveAs(fileFullName);
if (File.Exists(fileFullName))
fileNames.Add(filename);
else {
foreach (var fname in fileNames) {
string flname = Path.Combine(directoryName, fname);
if (File.Exists(flname))
File.Delete(flname);
}
rc = false;
break;
}
rc = true;
}
}
}
else {
errorMsg = "上传文件失败!";
log.Error("存放文件的文件夹名称不能为空!");
}
}
catch (Exception ex) {
log.Error("AddFile", ex);
errorMsg = "上传文件失败!";
}
log.DebugFormat("上传文件[{0}]{1} {2}", fileFullName, rc ? "成功!" : "失败!", errorMsg); return rc;
}

c#代码调用示例:

            //获取评论图片的保存目录
string directoryName = Utils.GetMapPath("/upload/img");
//需要过滤的图片文件后缀名
List<string> ext = new List<string> { };
//图片文件保存成功后获取的图片名称
List<string> fileNames = null;
string errorMsg = "";
//保存图片文件
if (Common.UploadFile(HttpContext.Current.Request.RequestContext.HttpContext.Request, directoryName, ext, out fileNames, out errorMsg)) { //返回文件的相对路径名字符串数组
rc.SetReturnData(fileNames.Select(it=> Common.GetRelativePath(Path.Combine(directoryName, it))).ToList());
rc.SetResult(ErrorCode.Success);
}
else
rc.SetResult(ErrorCode.Failed); rc.SetContentType("text/html");

js批量上传文件的更多相关文章

  1. 不带插件 ,自己写js,实现批量上传文件及进度显示

    今天接受项目中要完成文件批量上传文件而且还要显示上传进度,一开始觉得这个应该不是很麻烦,当我在做的时候遇到了很多问题,很头疼啊. 不过看了别人写的代码,自己也测试过,发现网上好多都存在一些问题,并不是 ...

  2. Java Miniui实现批量上传文件demo 201906221520

    可能需要的jar包: 需要miniui(类似easyui). Test2019062201.jsp <%@ page language="java" contentType= ...

  3. 百度编辑器ueditor批量上传图片或者批量上传文件时,文件名称和内容不符合,错位问题

    百度编辑器ueditor批量上传附件时,上传后的文件和实际文件名称错误,比如实际是文件名“dongcoder.xls”,上传后可能就成了“懂客.xls”.原因就是,上传文件时是异步上传,同时进行,导致 ...

  4. 利用ajaxfileupload.js异步上传文件

    1.引入ajaxfileupload.js 2.html代码 <input type="file" id="enclosure" name="e ...

  5. js获取上传文件内容(未完待续)

    js 获取上传文件的字节数及内容 <div> 上传文件 : <input type="file" name = "file" id = &qu ...

  6. Linux命令之rz - 批量上传文件,简单易用(转载)

    用途说明 rz命令能够批量上传文件,当然也可上传单个文件啦.使用的协议是古老的ZMODEM协议,尽管协议古老,但毫不影响的简单易用的特性.一般情 况我们要上传文件到Linux系统,要么使用ftp(还得 ...

  7. 转 Android网络编程之使用HttpClient批量上传文件 MultipartEntityBuilder

    请尊重他人的劳动成果,转载请注明出处:Android网络编程之使用HttpClient批量上传文件 http://www.tuicool.com/articles/Y7reYb 我曾在<Andr ...

  8. Python基于Python实现批量上传文件或目录到不同的Linux服务器

    基于Python实现批量上传文件或目录到不同的Linux服务器   by:授客 QQ:1033553122 实现功能 1 测试环境 1 使用方法 1 1. 编辑配置文件conf/rootpath_fo ...

  9. input file multiple 批量上传文件

    这几天维护系统,有一个批量上传文件功能,出现了一点小问题 我的笔记本选择要上传的文件很正常 但在测试环境上,别人的电脑上,选择上传文件之后 一开始,以为是代码问题,网上找了很多的资料,但还是没用,然后 ...

随机推荐

  1. Codeforces 797E - Array Queries

    E. Array Queries 题目链接:http://codeforces.com/problemset/problem/797/E time limit per test 2 seconds m ...

  2. JAVA基础知识总结:二十一

    一.URL和URLConnection 1.HTTP 超文本传输协议 是一个应用层的协议 是一个被动的协议 只有客户端主动给服务端发送消息,服务端才会给客户端一个响应 2.URL 统一的资源定位符(网 ...

  3. ionic 搜索双向数据绑定失效

    1.用data对象存储变化的数据 js: $scope.data={}; $scope.data.keywords = ""; $scope.search = function() ...

  4. echarts的学习

    博客1.:https://zrysmt.github.io/ 博客2:http://blog.csdn.net/future_todo/article/details/60956942 工作中一个需求 ...

  5. mac显示影藏文件

    http://blog.csdn.net/xiaoyuanzhiying/article/details/46694577 然后finder强制退出,然后重启.

  6. nodejs初识

    提到nodejs总离不开npm,因此首先要学些和了解npm.而对于npm.nodejs的了解都来源于菜鸟教程. nodejs学习地址:http://www.runoob.com/nodejs/node ...

  7. makefile 里的vpath

    https://www.cmcrossroads.com/article/basics-vpath-and-vpath Only missing prerequisites matching the ...

  8. Spring 拦截器实现+后台原理(MethodInterceptor)

    MethodInterceptor MethodInterceptor是AOP项目中的拦截器(注:不是动态代理拦截器),区别与HandlerInterceptor拦截目标时请求,它拦截的目标是方法. ...

  9. caffe在solverstate的基础上继续训练模型

    以mnist数据集为例: bat训练脚本: Build\x64\Release\caffe.exe train --solver=examples/mnist/lenet_solver.prototx ...

  10. 2017-2018-2 20165303 实验二《Java面向对象程序设计》实验报告

    实验一 实验要求 参考 http://www.cnblogs.com/rocedu/p/6371315.html#SECUNITTEST 完成单元测试的学习 提交最后三个JUnit测试用例(正常情况, ...