jquery 批量上传图片实现代码
<!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>
<%@ 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;
}
}
}
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;}
相关推荐
-
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
(jsp需要引入 :jquery-1.9.0.js.jquery.form.js ) ,jsp页面使用的是bootstrap制作的,看不懂的标签不用管,form表单大同小异.代码比较简陋,只是为了演示使用ajaxSubmit异步上传图片及保存数据,请海含! (参考文献:http://www.jb51.net/shouce/jquery/jquery_api/Plugins/Form/ajaxSubmit.html) 一:web (add.jsp) 复制代码 代码如下: <%@page impor
-
jquery 图片上传按比例预览插件集合
js部分是这样的: 复制代码 代码如下: //**********************图片上传预览插件************************ //作者:IDDQD(2009-07-01) //Email:iddqd5376@163.com //http://blog.sina.com.cn/iddqd //版本:1.0 //说明:图片上传预览插件 //上传的时候可以生成固定宽高范围内的等比例缩放图 //参数设置: //width 存放图片固定大小容器的宽 //height 存放图片
-
Jquery插件之多图片异步上传
1.初始化上传控件数量. 复制代码 代码如下: $(document).ready(function() { $('#H_File').uploadFile({ key: 'test',count:3 }); }); 以前的设计思想是,初始化上传控件数量,页面显示为1个上传控件,每当上传成功后,在下面创建一个上传控件. 2.上传图片成功后 这就是最终的效果,如果您有更好的插件,希望一起开源. 其他的就不多说了,如果您感兴趣,点击下载源码 /201010/yuanma/jquery_aspnet_
-
jquery实现兼容浏览器的图片上传本地预览功能
一.图片上传实现本地预览 由于上传图片功能,现在大多数都需要在本地实现预览,为了能够更好的让用户体验到效果,实现成品的证明,需要兼容好几种浏览器,所有通过各个例子整合了这个例子插件,兼容火狐.谷歌.ie8,其他的没有进行测试过 复制代码 代码如下: (function($){ jQuery.fn.extend({ uploadPreview: function(opts){ opts = jQuery.extend({ width: 0, height: 0, imgPreview: null,
-
基于JQuery实现图片上传预览与删除操作
本文实例为大家分享了JQuery实现图片上传预览与删除的具体代码,经测试目前满足谷歌.火狐.360.IE6,7,8,9,10,11等浏览器,供大家参考,具体内容如下 1. preview.2.0.html <!DOCTYPE html> <html> <head> <title>上传图片预览</title> <meta http-equiv="content-type" content="text/html;
-
jQuery实现图片放大预览实现原理及代码
对于一些比较小的图片,通过鼠标移动到图片上进行放大显示,原理很简单,就是将图片显示的尺寸变大后放在浏览器的一个指定位置,从而实现图片的放大预览.以下是代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&q
-
Jquery ajaxsubmit上传图片实现代码
而且未建立统一上传函数.于是将代码改造了.心想来个ajax异步上传图片吧,这技术应该很老套了.于是直接打开强大的cnblogs轻松的找到了 这篇文章 直接依葫芦画瓢,将该作者的劳动成果直接"拿来主义了".很快就把代码全改造了.可是当我把程序发布到服务器上的时问题来了.上传文件失效了!汗- 都是偷懒造成的恶果.继续打开先前参考的那篇文章.原来作者解释了只能在本地使用而不能发布到服务器上.心想我难道还得用 iframe + http post 这个 郁闷的方式么?? 于是不甘心的我打开了更
-
jQuery拖动图片删除示例
复制代码 代码如下: <head> <title></title> <style type="text/css"> #mydiv { width: 900px; background-color: #444; position: absolute; left: 100px; } img { width: 200px; height: 200px; } ul { list-style-type: none; height: 200px; }
-
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
jquery实现上传图片及图片大小验证.图片预览效果代码 上传图片验证 复制代码 代码如下: */ function submit_upload_picture(){ var file = $('file_c').value; if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){ alert("图片类型必须是.gif,jpeg,jpg,png中的一种") }else{ $('both_form').action="file!u
-
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="
-
PHP批量上传图片的具体实现方法介绍.
大家可以通过下面这一段代码,来具体了解PHP批量上传图片的具体方式.我们在学习PHP的时候,肯定是要从实际操作中慢慢积累经验,以巩固我们所学到的知识,逐渐的加强我们的编程水平. •PHP保护文件系统的具体代码分享•PHP保护数据库的具体代码示例•探讨主要的PHP应用领域•基于PHP的AJAX技术的具体应用解析•PHP限制上传文件大小的具体解决办法PHP批量上传图片的代码如下: 复制代码 代码如下: <html> <head><title>uploadpicturemor
-
TP框架实现上传一张图片和批量上传图片的方法分析
本文实例讲述了TP框架实现上传一张图片和批量上传图片的方法.分享给大家供大家参考,具体如下: 上传一张图片 前端代码: <form action="{地址}" method="POST" enctype="multipart/form-data"> <input name="image" type="file" value="" /> <input type
-
JQuery+ajax实现批量上传图片(自写)
在网上搜索了一下,发现以jquery+ajax方式实现单张图片上传的代码是有的,但实现批量上传图片的程序却没搜索到,于是根据搜索到的代码,写了一个可以批量上传的.先看效果图 点击增加按钮,会增加一个选择框,如下图: 选择要上传的图片,效果图如下: 上传成功如下图: 下面来看代码:前台html主要代码: 复制代码 代码如下: <button id="SubUpload" class="ManagerButton" onClick="TSubmitUpl
-
使用JS+plupload直接批量上传图片到又拍云
论坛或者贴吧经常会需要分享很多图片,上传图片比较差的做法是上传到中央服务器上,中央服务器再转发给静态图片服务器.而这篇文章讲介绍如何使用plupload对上传过程进行优化,并绕过服务器直接批量上传图片到又拍云上的方法.本文集中会讲到以下几个重点: 复制代码 代码如下: plupload库 图片的本地压缩 多选图片 绕过服务器直接批量上传图片到又拍云 使用又拍的HTTP FORM API plupload的配置 plupload库 plupload是一个支持非常丰富的图片上传插件.可以对低版本的浏
-
WebUploader客户端批量上传图片 后台使用springMVC
本文为大家讲解了如何使用WebUploader客户端批量上传图片,供大家参考,具体内容如下 因为最近主管让用webUploader写客户端,但是在网上找了很多,能够复制就能用的并没有几个,但是经过修改后还可以,为了后面的人在需要使用到的时候可以直接copy我再此将代码和注释共享在这里. <!--需要引入的文件--> <link rel="stylesheet" type="text/css" href="../css/webuploade
-
Python Tornado批量上传图片并显示功能
简介 Tornado龙卷风是一个开源的网络服务器框架,它是基于社交聚合网站FriendFeed的实时信息服务开发而来的.2007年由4名Google前软件工程师一起创办了FriendFeed,旨在使用户能够方便地跟踪好友在Facebook和Twitter等多个社交网站上的活动.结果两年后,Facebook宣布收购FriendFeed,交易价格约为5000万美元.而此时FriendFeed只有12名员工.据说这帮人后来又到了Google,搞出了现在的Google App Engine... 我们开
-
c#批量上传图片到服务器示例分享
客户端代码: 复制代码 代码如下: /// <summary>/// 批量上传图片/// </summary>/// <param name="srcurl">服务器路径</param>/// <param name="imagesPath">图片文件夹路径</param>/// <param name="files">图片名称</param>publ
-
详解Java实现批量压缩图片裁剪压缩多种尺寸缩略图一键批量上传图片
10万+IT人都在关注的图片批量压缩上传方案(完整案例+代码) 背景需求:为了客户端访问图片资源时,加载图片更流畅,体验更好,通常不会直接用原图路径,需要根据不同的场景显示不同规格的缩略图,根据商品关键属性,能够获取到图片不同尺寸规格的图片路径,并且能根据不同缩略图直观看到商品的关键属性,需要写一个Java小工具把本地磁盘中的图片资源一键上传至分布式FastDFS文件服务器,并把图片信息存入本地数据库,PC端或者客户端查询商品时,就可以根据商品的业务属性.比如根据productId就能把商品相关