jquery php批量上传,jQuery_jquery 批量上传图片实现代码，前台: upload.htm 复制代码代码 - phpStudy...

àì夳堔傛蜴生んèń 2023-10-04 12:08 46阅读 0赞

jquery 批量上传图片实现代码

前台: upload.htm

复制代码 代码如下:

upload

*  确定上传
    
    取消
    
    增加

*  图片1:

var TfileUploadNum = 1; //记录图片选择框个数

var Tnum = 1; //ajax上传图片时索引

//增加上传按钮

function TAddFileUpload() \{

var idnum = TfileUploadNum + 1;

var str = "

str += "

图片" + idnum + ":

str += "

$("\#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("![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("![Success.gif][upfileloader.gif]" + stringArray\[1\] + "--" + stringArray\[2\]);

else \{

//上传出错

$("\#uploadImgState" + Tnum).html("![Error.gif][upfileloader.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;

处理程序Handler.ashx

复制代码 代码如下:

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|文件路径错误");

///

/// 保存图片

///

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+"|保存成功.";

///

/// 检测图片类型

///

/// 正确返回True

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;

///

/// 得到随机图片名

///

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;\}相关阅读:

dmysql自己封装的mysql库

Vista安全技巧 DIY系统安全检测

发表文章时自动保存到剪贴板

jquery实现前一个和后一个效果

怎样彻底关闭Vista安全中心没完没了的提示？

将JSP在内存生成的图片显示到页面

SQL Server 2000的安全配置

SQL Server 2008：传递表值参数

CSS中Float(浮动)相关技巧文章

使用第一个真正的 Ajax 服务器

Webjx推荐5个改善CSS编码的幻灯片教程

FREEBSD软件安装

Service Unavailable问题

Discuz论坛的WAP功能在手机上使用感爱

[upfileloader.gif]:

jquery php批量上传,jQuery_jquery 批量上传图片实现代码，前台: upload.htm 复制代码代码 - phpStudy...

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 springboot 上传批量上传图片

相关 jquery php批量上传,jQuery_jquery 批量上传图片实现代码，前台: upload.htm 复制代码代码 - phpStudy...

相关 webuploader 实现图片批量上传功能附实例代码

相关 Typora批量上传图片

相关 oss批量上传工具_使用oss批量上传图片

相关 php上传图片并显示代码,php完整图片上传代码

相关 android批量文件上传（android批量图片上传）

相关 php实现多文件上传代码

相关 Angular批量上传图片

相关 Java图片上传 + 批量