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. Python 百分比计算

    遇到计算百分比的情况,查了一下,有两种方式 具体实现方式见下面代码 # 方式1 格式化为float ,然后 处理成%格式, 需要对分子/分母 * 100如下, percentList.append(' ...

  2. 最多的划分来使数组有序 Max Chunks To Make Sorted

    2018-12-01 11:05:46 一.Max Chunks To Make Sorted 问题描述: 问题求解: 由于没有重复,所以直观的来看对于每个遇到数,其能够被划分出来的前提是其前面已经有 ...

  3. C语言转义字符基础总结

    C语言转义字符总结 C语言中的转义字符,是字符常量中很特别的一类.初学者容易在这方面犯错误,比如说我. 错题1 答案:C解析:每一个转义字符具有一个长度,这个字符串中:\t, \x43, \', \ ...

  4. 并发之ThreadLocal

    ThreadLocal ThreadLocal 用一种存储变量与线程绑定的方式,在每个线程中用自己的 ThreadLocalMap 安全隔离变量,为解决多线程程序的并发问题提供了一种新的思路.   简 ...

  5. spring ----> 搭建spring+springmvc+mybatis出现的几个问题

    环境: idea ce 2018.1+maven3.5.3+mysql8.0.11+jdk1.8 spring4.3.7+spring mvc4.3.7+mybatis3.4.1+tomcat7.0. ...

  6. Docker 镜像上传到docker hub仓库

    1 先创建docker hub 帐号 ,并创建仓库 https://hub.docker.com/ 首先你需要一个docker hub 帐号,记住username,password,email .后面 ...

  7. python记录_day27 tcp/ip五层模型

    ## 网络协议按照不同的功能分为多层,目前存在的模型有osi七层模型.tcp/ip五层和tcp/ip四层模型 我们主要用的是tcp/ip五层模型 那么每层的作用是什么呢,现在就从设计者的角度自下到上逐 ...

  8. canal入门Demo

    关于canal具体的原理,以及应用场景,可以参考开发文档:https://github.com/alibaba/canal 下面给出canal的入门Demo (一)部署canal服务器 可以参考官方文 ...

  9. 微信公众号使用LocalStorage解决返回缓存问题

    在开发微信公众号上应用程序时,遇到了一个普遍的问题,从A页跳转到B页后,再由B页跳转回A页,A要要保持跟跳转前一致,通过LocalStorage可以解决. LocalStorage,很好的解决了返回的 ...

  10. poj-2514-模拟

    http://poj.org/problem?id=2514 Ridiculous Addition Time Limit: 1000MS   Memory Limit: 65536K Total S ...