jquery 批量上传图片实现代码


Posted in Javascript onJanuary 28, 2010

前台: upload.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>upload</title> 
<link href="upload.css" rel="Stylesheet" /> 
</head> 
<body> 
<form> 
<ul> 
<li> 
<button id="SubUpload" onclick="TSubmitUploadImageFile();return false;"> 
确定上传</button>   
<button id="CancelUpload" class="ManagerButton" onclick="javascript:history.go(-1);"> 
取消</button>   
<button id="AddUpload" class="ManagerButton" onclick="TAddFileUpload();return false;"> 
增加</button> 
</li> 
</ul> 
<ul id="loadimage"> 
<li> 
<div class="imagelabel"> 
图片1:</div> 
<div class="imagepath"> 
<input name="" size="45" id="uploadImg1" type="file" /></div> 
<div class="loadinfo"> 
<span id="uploadImgState1"></span> 
</div> 
</li> 
</ul> 
</form> 
</body> 
</html> 
<script type="text/javascript" src="http://www.cnblogs.com/JS/jquery-1.3.2-vsdoc.js"></script> 
<script type="text/javascript"> 
var TfileUploadNum = 1; //记录图片选择框个数 
var Tnum = 1; //ajax上传图片时索引 
//增加上传按钮 
function TAddFileUpload() { 
var idnum = TfileUploadNum + 1; 
var str = "<li>"; 
str += "<div class='imagelabel'>图片" + idnum + ":</div>"; 
str += "<div class='imagepath'><input name='' size='45' id='uploadImg" + idnum + "' type='file' /></div>"; 
str += "<div class='loadinfo'><span id='uploadImgState" + idnum + "'></span></div>"; 
str += "</li>"; 
$("#loadimage").append(str); 
TfileUploadNum += 1; 
} 
//开始上传 
function TSubmitUploadImageFile() { 
document.getElementById("SubUpload").disabled = true; 
document.getElementById("CancelUpload").disabled = true; 
document.getElementById("AddUpload").disabled = true; 
setTimeout("TajaxFileUpload()", 1000); //此为关键代码 
} 
//Ajax上传方法 
function TajaxFileUpload() { 
if (Tnum < TfileUploadNum + 1) { 
//准备提交处理 
$("#uploadImgState" + Tnum).html("<img src='/gif/upfileloader.gif'/>"); 
//开始提交 
$.ajax({ 
type: "POST", 
url: "Handler.ashx", 
data: { upfile: $("#uploadImg" + Tnum).val()}, 
success: function(data, status) { 
var stringArray = data.split("|"); 
//stringArray[0]  成功状态(1为成功,0为失败) 
//stringArray[1]
  上传成功的文件名 
//stringArray[2]
  消息提示 
if (stringArray[0] == "1") { 
//上传成功 
$("#uploadImgState" + Tnum).html("<img src='/gif/Success.gif' />" + stringArray[1] + "--" + stringArray[2]); 
} 
else { 
//上传出错 
$("#uploadImgState" + Tnum).html("<img src='/gif/Error.gif' />" + stringArray[1] + "--" + stringArray[2]); 
} 
Tnum++; 
setTimeout("TajaxFileUpload()", 1000); 
} 
}); 
} 
else { 
document.getElementById("SubUpload").disabled = false; 
document.getElementById("CancelUpload").disabled = false; 
document.getElementById("AddUpload").disabled = false; 
} 
}



 
</script>

处理程序Handler.ashx
<%@ WebHandler Language="C#" Class="Handler" %> 
using System; 
using System.Web; 
using System.IO; 
using System.Text; 
using System.Net; 
public class Handler : IHttpHandler 
{ 
public void ProcessRequest(HttpContext context) 
{ 
//源图片路径 
string _fileNamePath = ""; 
try 
{ 
_fileNamePath = context.Request.Form["upfile"]; 
string _savedFileResult = UpLoadFile(_fileNamePath); //开始上传 
context.Response.Write(_savedFileResult);//返回上传结果 
} 
catch 
{ 
context.Response.Write("0|error|文件路径错误"); 
} 
} 
/// <summary> 
/// 保存图片 
/// </summary> 
/// <param name="fileNamePath"></param> 
/// <returns></returns> 
private string UpLoadFile(string fileNamePath) 
{ 
//图片格式 
string fileNameExt = fileNamePath.Substring(fileNamePath.IndexOf('.')).ToLower(); 
if (!CheckFileExt(fileNameExt)) return "0|error|图片格式不正确!"; 
//保存路径 
string toFilePath = "ProductUpload/"; 
//物理完整路径 
string toFileFullPath = HttpContext.Current.Server.MapPath(toFilePath); 
//检查是否有该路径 没有就创建 
if (!Directory.Exists(toFileFullPath)) 
{ 
Directory.CreateDirectory(toFileFullPath); 
} 
//生成将要保存的随机文件名 
string toFileName = GetFileName(); 
//将要保存的完整路径 
string saveFile=toFileFullPath +toFileName + fileNameExt; 
///创建WebClient实例 
WebClient myWebClient = new WebClient(); 
//设定windows网络安全认证 
myWebClient.Credentials = CredentialCache.DefaultCredentials; 
//要上传的文件 
FileStream fs = new FileStream(fileNamePath, FileMode.Open, FileAccess.Read); 
  
BinaryReader r = new BinaryReader(fs); 
//使用UploadFile方法可以用下面的格式 
myWebClient.UploadFile(saveFile,fileNamePath); 
return "1|"+toFileName+fileNameExt+"|保存成功."; 
} 
/// <summary> 
/// 检测图片类型 
/// </summary> 
/// <param name="_fileExt"></param> 
/// <returns>正确返回True</returns> 
private bool CheckFileExt(string _fileExt) 
{ 
string[] allowExt = new string[] { ".gif", ".jpg", ".jpeg" }; 
for (int i = 0; i < allowExt.Length; i++) 
{ 
if (allowExt[i] == _fileExt) { return true; } 
} 
return false; 
} 
/// <summary> 
/// 得到随机图片名 
/// </summary> 
/// <returns></returns> 
public static string GetFileName() 
{ 
Random rd = new Random(); 
StringBuilder serial = new StringBuilder(); 
serial.Append(DateTime.Now.ToString("yyMMddHHmmssff")); 
serial.Append(rd.Next(0, 9999).ToString()); 
return serial.ToString(); 
} 
public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 
}

CSS样式 upload.css
body{font-size: 12pt;} 
ul{list-style: none;} 
li{margin: 0px;} 
#loadimage{width: 860px;overflow: hidden;} 
.imagelabel{ float: left; width: 60px; height: 25px;} 
.imagepath{float: left; width: 400px; height: 25px; } 
.loadinfo{float: left; width: 400px;height: 25px;}
Javascript 相关文章推荐
获取当前网页document.url location.href区别总结
May 10 Javascript
javascript RadioButtonList获取选中值
Apr 09 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
Nov 10 Javascript
jQuery中prepend()方法使用详解
Aug 11 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
详解Javascript函数声明与递归调用
Oct 22 Javascript
jQuery Validate 校验多个相同name的方法
May 18 jQuery
简单实现js鼠标跟随效果
Aug 02 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
Sep 30 Javascript
ionic3双击返回退出应用的方法
Sep 17 Javascript
Layui tree 下拉菜单树的实例代码
Sep 21 Javascript
手写Spirit防抖函数underscore和节流函数lodash
Mar 22 Javascript
Jquery 常用方法经典总结
Jan 28 #Javascript
javascript 匿名函数的理解(透彻版)
Jan 28 #Javascript
JavaScript 学习笔记(十五)
Jan 28 #Javascript
Extjs 几个方法的讨论
Jan 28 #Javascript
JavaScript 判断判断某个对象是Object还是一个Array
Jan 28 #Javascript
图像替换新技术 状态域方法
Jan 28 #Javascript
javascript innerText和innerHtml应用
Jan 28 #Javascript
You might like
解析thinkphp中的导入文件标签
2013/06/20 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
php通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
PHPExcel读取EXCEL中的图片并保存到本地的方法
2015/02/14 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
jquery 插件学习(三)
2012/08/06 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
2013/12/16 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
2015/10/08 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
解决vue-cli3 使用子目录部署问题
2018/07/19 Javascript
JS计算斐波拉切代码实例
2019/09/12 Javascript
Vue.js中的高级面试题及答案
2020/01/13 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
python 字典操作提取key,value的方法
2019/06/26 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
python实现计算器简易版
2020/12/17 Python
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
营业经理岗位职责
2013/11/10 职场文书
环境工程专业自荐信
2014/03/03 职场文书
工作会议方案
2014/05/21 职场文书
公司演讲稿开场白
2014/08/25 职场文书
城管年度个人总结
2015/02/28 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
毕业赠语大全
2015/06/23 职场文书
卖车协议书范文
2016/03/23 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript