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 1053 C - Putting Boxes Together

    C - Putting Boxes Together 思路: 求带权中位数 用树状数组维护修改 代码: #pragma GCC optimize(2) #pragma GCC optimize(3) ...

  2. python paramiko 模块简单介绍

    背景,公司的很多服务包括数据库访问都需要通过跳板机访问,为日常工作及使用带来了麻烦,特别数python直接操作数据更是麻烦了,所以一直想实现python 通过跳板机访问数据库的操作. 首先了解到了 p ...

  3. c# 7.0 学习笔记

    refer : https://docs.microsoft.com/en-us/dotnet/csharp/whats-new/csharp-7 out 可以写在里面了 // int result ...

  4. (转+整理)C#中使用GUID

    GUID(全局统一标识符)是指在一台机器上生成的数字,它保证对在同一时空中的所有机器都是唯一的.通常平台会提供生成GUID的API.生成算法很有意思,用到了以太网卡地址.纳秒级时间.芯片ID码和许多可 ...

  5. 安卓音、视频播放功能简单实现 --Android基础

    1.音乐播放功能 关键代码: MainActivity.java: package thonlon.example.cn.musicdemowithoutservice; import android ...

  6. No address associated with hostname

    java.net.UnknownHostException: Unable to resolve host "www.baidu.com": No address associat ...

  7. 20180429 xlVBA套打单据批量复制

    Sub testCopyModelRange() Set ModelSheet = ThisWorkbook.Worksheets("单据模板") Set PrintSheet = ...

  8. codeforces547a

    http://codeforces.com/contest/547/problem/A 题意:确定是否在某一时刻高度都同时为a1和a2. step1:找到青蛙首次到a1的时间pri1以及重复到a1的周 ...

  9. java,sort函数的深刻理解

    先来看看题目吧: 链接:https://www.nowcoder.com/questionTerminal/97b6a49a85944650b2e3d0660b91c324来源:牛客网 [编程题]德才 ...

  10. caffe-ssd

    1.安装依赖 1 sudo apt-get install libprotobuf-dev libleveldb-dev libsnappy-dev libopencv-dev libhdf5-ser ...