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;}

时间: 2010-01-26

jquery实现兼容浏览器的图片上传本地预览功能

一.图片上传实现本地预览 由于上传图片功能,现在大多数都需要在本地实现预览,为了能够更好的让用户体验到效果,实现成品的证明,需要兼容好几种浏览器,所有通过各个例子整合了这个例子插件,兼容火狐.谷歌.ie8,其他的没有进行测试过 复制代码 代码如下: (function($){ jQuery.fn.extend({ uploadPreview: function(opts){ opts = jQuery.extend({ width: 0, height: 0, imgPreview: null,

Jquery插件之多图片异步上传

1.初始化上传控件数量. 复制代码 代码如下: $(document).ready(function() { $('#H_File').uploadFile({ key: 'test',count:3 }); }); 以前的设计思想是,初始化上传控件数量,页面显示为1个上传控件,每当上传成功后,在下面创建一个上传控件. 2.上传图片成功后 这就是最终的效果,如果您有更好的插件,希望一起开源. 其他的就不多说了,如果您感兴趣,点击下载源码 /201010/yuanma/jquery_aspnet_

Jquery ajaxsubmit上传图片实现代码

而且未建立统一上传函数.于是将代码改造了.心想来个ajax异步上传图片吧,这技术应该很老套了.于是直接打开强大的cnblogs轻松的找到了 这篇文章 直接依葫芦画瓢,将该作者的劳动成果直接"拿来主义了".很快就把代码全改造了.可是当我把程序发布到服务器上的时问题来了.上传文件失效了!汗- 都是偷懒造成的恶果.继续打开先前参考的那篇文章.原来作者解释了只能在本地使用而不能发布到服务器上.心想我难道还得用 iframe + http post 这个 郁闷的方式么?? 于是不甘心的我打开了更

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实现图片上传预览与删除操作

本文实例为大家分享了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拖动图片删除示例

复制代码 代码如下: <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实现图片放大预览实现原理及代码

对于一些比较小的图片,通过鼠标移动到图片上进行放大显示,原理很简单,就是将图片显示的尺寸变大后放在浏览器的一个指定位置,从而实现图片的放大预览.以下是代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&q

jquery 图片上传按比例预览插件集合

js部分是这样的: 复制代码 代码如下: //**********************图片上传预览插件************************ //作者:IDDQD(2009-07-01) //Email:iddqd5376@163.com //http://blog.sina.com.cn/iddqd //版本:1.0 //说明:图片上传预览插件 //上传的时候可以生成固定宽高范围内的等比例缩放图 //参数设置: //width 存放图片固定大小容器的宽 //height 存放图片

Nodejs实现图片上传、压缩预览、定时删除功能

前言 我们程序员日常都会用到图片压缩,面对这么常用的功能,肯定要尝试实现一番. 第一步,node基本配置 这里我们用到的是koa框架,它可是继express框架之后又一个更富有表现力.更健壮的web框架. 1.引入基本配置 const Koa = require('koa');// koa框架 const Router = require('koa-router');// 接口必备 const cors = require('koa2-cors'); // 跨域必备 const tinify =

jquery实现图片上传前本地预览

前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得到的反而是C:\fakepath\a.jpg,这个路径是错误的.百度之后得到说浏览器基于保护用户的相关安全措施,隐藏了上传的真实路径,用fakepath代替,当然,调整浏览器的相关安全设置可以解决这个问题.但我们不可能让所有用户都通过设置浏览器的安全设置来进行图片上传,这种方法在网络交互上显然不现实

jquery实现图片上传前本地预览功能

本文实例为大家分享了jquery实现图片上传前预览的具体代码,供大家参考,具体内容如下 介绍之前有一个小问题,一直找不到图片预览时,图片不出来的原因,原来在于图片的路径!!!一直写的是图片的本地路径,没有什么用.直接上代码. html部分: 复制代码 代码如下: <img id="pic" src="" > <input id="upload" name="file" accept="image/*

分离与继承的思想实现图片上传后的预览功能:ImageUploadView

本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路,考虑到该功能有一定的适用性,于是把相关的逻辑封装成了一个ImageUploadView组件,实际使用效果可查看下一段的git效果图.在实现这个组件的过程中,有用到前面几篇博客介绍的相关内容,比如继承库class.js,任意组件的事件管理库eventBase.js,同时包含进了自己对职责分离,表现与行为分离这两方面的一些思考,欢迎阅读与交流. 演示效果: 注:由于演示的代码都是静态的,所以文件上传的组件是用setTimeout模

图片上传判断及预览脚本的效果实例

复制代码 代码如下: <div id="imgbox">    <img id="imghead" src="img/no_photo.gif" alt="" width="100" height="125" />    </div><asp:FileUpload ID="FileUploadImg" runat="

Ajax上传图片及上传前先预览功能实例代码

手头上有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成.在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果,解决了这两个小问题,和小伙伴们分享下. 上传之前的预览 方式一 先来说说图片上传之前的预览问题.这里主要采用了HTML5中的FileReader对象来实现,关于FileReader对象,如果小伙伴们不了解,可以查看这篇文章HTML5学习之FileReader接口.我们来看看实现方式: <!DOCT

jsp中点击图片弹出文件上传界面及预览功能的实现

花了两天时间琢磨一下图片预览的功能 任务需求如下: 1:jsp页面中有一个图片(pic_1) 2:点击图片弹出类似于资源管理器的界面 3:选择完某一个图片之后在pic_1处预览 我在IE8上试验下面这段代码,可以实现上述功能,没有在别的浏览器中测试,如果各位朋友知道多种浏览器的支持方法,请赐教,共同学习,谢谢. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:

php实现文件上传及头像预览功能

php文件上传原理是通过form表单的enctype="multipart/form-data"属性将文件临时放到wamp文件夹中的tmp目录下,再通过后台php程序将文件保存在体统中. html代码: <form action="shangchuan.php" method="post" enctype="multipart/form-data"> <input type="file"

JS+HTML5 FileReader实现文件上传前本地预览功能

HTML5之FileReader的使用 HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简单,可以按照如下步骤创建FileReader对象并调用其方法: 1.检测浏览器对FileReader的支持 if(window.FileReader) { var fr = new FileReader(); // add your code here } e