js批量上传文件
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批量上传文件的更多相关文章
- 不带插件 ,自己写js,实现批量上传文件及进度显示
今天接受项目中要完成文件批量上传文件而且还要显示上传进度,一开始觉得这个应该不是很麻烦,当我在做的时候遇到了很多问题,很头疼啊. 不过看了别人写的代码,自己也测试过,发现网上好多都存在一些问题,并不是 ...
- Java Miniui实现批量上传文件demo 201906221520
可能需要的jar包: 需要miniui(类似easyui). Test2019062201.jsp <%@ page language="java" contentType= ...
- 百度编辑器ueditor批量上传图片或者批量上传文件时,文件名称和内容不符合,错位问题
百度编辑器ueditor批量上传附件时,上传后的文件和实际文件名称错误,比如实际是文件名“dongcoder.xls”,上传后可能就成了“懂客.xls”.原因就是,上传文件时是异步上传,同时进行,导致 ...
- 利用ajaxfileupload.js异步上传文件
1.引入ajaxfileupload.js 2.html代码 <input type="file" id="enclosure" name="e ...
- js获取上传文件内容(未完待续)
js 获取上传文件的字节数及内容 <div> 上传文件 : <input type="file" name = "file" id = &qu ...
- Linux命令之rz - 批量上传文件,简单易用(转载)
用途说明 rz命令能够批量上传文件,当然也可上传单个文件啦.使用的协议是古老的ZMODEM协议,尽管协议古老,但毫不影响的简单易用的特性.一般情 况我们要上传文件到Linux系统,要么使用ftp(还得 ...
- 转 Android网络编程之使用HttpClient批量上传文件 MultipartEntityBuilder
请尊重他人的劳动成果,转载请注明出处:Android网络编程之使用HttpClient批量上传文件 http://www.tuicool.com/articles/Y7reYb 我曾在<Andr ...
- Python基于Python实现批量上传文件或目录到不同的Linux服务器
基于Python实现批量上传文件或目录到不同的Linux服务器 by:授客 QQ:1033553122 实现功能 1 测试环境 1 使用方法 1 1. 编辑配置文件conf/rootpath_fo ...
- input file multiple 批量上传文件
这几天维护系统,有一个批量上传文件功能,出现了一点小问题 我的笔记本选择要上传的文件很正常 但在测试环境上,别人的电脑上,选择上传文件之后 一开始,以为是代码问题,网上找了很多的资料,但还是没用,然后 ...
随机推荐
- 小程序for循环给里面单独的view加单独的样式
效果图如下: 上面是个列表从数据库拿下来所有的信息:在视图层直接一个for循环展示下来,现在麻烦来了前三个和后面的额不一样,小程序不允许dom操作,那怎么解决呢? 解决办法: wx:for和wx:if ...
- nodejs使用log4js记录日志
log4j是java里面最好用的日志记录插件,在.net上面也有移植log4j.net.同样也移植到了nodejs里面,多的不说,把自测通过的代码粘出来吧. var log4js = require( ...
- pandas删除行删除列,增加行增加列
创建df: >>> df = pd.DataFrame(np.arange(16).reshape(4, 4), columns=list('ABCD'), index=list(' ...
- canal入门Demo
关于canal具体的原理,以及应用场景,可以参考开发文档:https://github.com/alibaba/canal 下面给出canal的入门Demo (一)部署canal服务器 可以参考官方文 ...
- P4238 【模板】多项式求逆 ntt
题意:求多项式的逆 题解:多项式最高次项叫度deg,假设我们对于多项式\(A(x)*B(x)\equiv 1\),已知A,求B 假设度为n-1,\(A(x)*B(x)\equiv 1(mod x^{\ ...
- 第二阶段——个人工作总结DAY10
1.昨天做了什么:昨天其实什么也没实现. 2.今天打算做什么:今天就软件,等到审核过了,再看看软件最后后台是怎么实现的. 3.遇到的困难:后台自己都没有实现.
- linux上安装vmtools
在虚拟机和宿主机之间来说操作得一直按ctrl+alt,显得比较麻烦. 那么就只要安装一个工具就可以让我们的操作更加的简易,我对vmtools安装步骤做了以下图解. 在导航栏找到这个标签,选择安装vmt ...
- CRM 价格批导
日了,好多代码....COPY别人的,懒得改了 *----------------------------------------------------------------------* *** ...
- git拉取远程分支并创建本地分支
本地分支推送至远程 git checkout local_branch git push origin local_branch:remote_branch 一.查看远程分支 使用如下Git命令查看所 ...
- 时间序列(六): 炙手可热的RNN: LSTM
目录 炙手可热的LSTM 引言 RNN的问题 恐怖的指数函数 梯度消失* 解决方案 LSTM 设计初衷 LSTM原理 门限控制* LSTM 的 BPTT 参考文献: 炙手可热的LSTM 引言 上一讲说 ...