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 相关文章推荐
检测是否已安装 .NET Framework 3.5的js脚本
Feb 14 Javascript
JavaScript 学习笔记(十一)
Jan 19 Javascript
判断控件是否已加载完成的代码
Feb 24 Javascript
利用jQuery接受和处理xml数据的代码(.net)
Mar 28 Javascript
快速解决jQuery与其他库冲突的方法介绍
Jan 02 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
Jun 24 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
Sep 04 Javascript
jquery实现简易的移动端验证表单
Nov 08 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
js去字符串前后空格的实现方法
Feb 26 Javascript
JS设计模式之数据访问对象模式的实例讲解
Sep 30 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Apr 20 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
PHP中文分词的简单实现代码分享
2011/07/17 PHP
PHP开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
php中adodbzip类实例
2014/12/08 PHP
Zend Framework教程之Autoloading用法详解
2016/03/08 PHP
PHP模板引擎Smarty内置变量调解器用法详解
2016/04/11 PHP
php中使用websocket详解
2016/09/23 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
Nigma vs Alliance BO5 第四场2.14
2021/03/10 DOTA
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
js实现页面转发功能示例代码
2013/08/05 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
Javascript闭包(Closure)详解
2015/05/05 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
jQuery实现简易的输入框字数计数功能示例
2017/01/16 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
JavaScript中的函数式编程详解
2020/08/22 Javascript
[07:06]2018DOTA2国际邀请赛寻真——卫冕冠军Team Liquid
2018/08/10 DOTA
python列表操作使用示例分享
2014/02/21 Python
wxpython学习笔记(推荐查看)
2014/06/09 Python
python实现二维码扫码自动登录淘宝
2016/12/27 Python
用python生成1000个txt文件的方法
2018/10/25 Python
解决Keras TensorFlow 混编中 trainable=False设置无效问题
2020/06/28 Python
电子商务专业学生的自我鉴定
2013/11/28 职场文书
运动会广播稿80字
2014/01/23 职场文书
学校综治宣传月活动总结
2014/07/02 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
狂人日记读书笔记
2015/06/30 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书
MySQL表的增删改查基础教程
2021/04/07 MySQL
nginx结合openssl实现https的方法
2021/07/25 Servers