管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

jquery 批量上传图片实现代码

前台: 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;}

教程首页 更多教程