jquery批量上传
A. jQuery fileupload 多文件上传
//js
$(function(){
//文件上传地址
//varurl='http://localhost/index.php/upload/do_upload';
varurl='http://localhost/index.php/uploadwe';
//初始化，主要是设置上传参数，以及事件处理方法(回调函数)
$('#fileupload').fileupload({
autoUpload:true,//是否自动上传
//url:url,//上传地址
dataType:'json',
done:function(e,data){//设置文件上传完毕事件的回调函数
//$.each(data.result.files,function(index,file){
$("#myimg").attr({src:data.result.imgurl});
$("#myimg").css({width:"290px",height:"218px"});
//alert(data.result);
},
progressall:function(e,data){//设置上传进度事件的回调函数
varprogress=parseInt(data.loaded/data.total*5,10);
$('#progress.bar').css(
'width',
progress+'%'
);
}
});
});
//上传至服务后，服务器返回json数据--上传图片的地址。
//html
<labelfor="text">上传图片</label>
<inputid="fileupload"type="file"name="files"data-url="<spanstyle="color:#ff6666;">jquery_save_img</span>"multiple>
//data-url为上传至服务器端的处理接口/地址，可替换js中的url
//服务器端
functionjquery_save_img()
{
$arrType=array('image/jpg','image/gif','image/png','image/bmp','image/pjpeg','image/jpeg');
$max_size='500000000000';//最大文件限制（单位：byte）
$upfile='./uploads';//图片目录路径
$file=$_FILES['files'];
/*
echo'filename:'.$file['tmp_name'].';<br/>';
echo'size:'.$file['size'].';<br/>';
echo'type:'.$file['type'].';<br/>';
echo'name:'.$file['name'].';<br/>';
*/
if($_SERVER['REQUEST_METHOD']=='POST'){//判断提交方式是否为POST
if(!is_uploaded_file($file['tmp_name'])){//判断上传文件是否存在
echo"<fontcolor='#FF0000'>文件不存在！</font>";
exit;
}
if($file['size']>$max_size){//判断文件大小是否大于500000字节
echo"<fontcolor='#FF0000'>上传文件太大！</font>";
exit;
}
if(!in_array($file['type'],$arrType)){//判断图片文件的格式
echo"<fontcolor='#FF0000'>上传文件格式不对！</font>xxx:".$file['type'];
exit;
}
if(!file_exists($upfile)){//判断存放文件目录是否存在
mkdir($upfile,0777,true);
}
$imageSize=getimagesize($file['tmp_name']);
$img=$imageSize[0].'*'.$imageSize[1];
$fname=$file['name'];
$ftype=explode('.',$fname);
$picName=$upfile."/cloudy".$fname;
if(file_exists($picName)){
//echo"<fontcolor='#FF0000'>同文件名已存在！</font>";
//exit;
}
if(!move_uploaded_file($file['tmp_name'],$picName)){
echo"<fontcolor='#FF0000'>移动文件出错！</font>";
exit;
}
else{
/*
echo"<fontcolor='#FF0000'>图片文件上传成功！</font><br/>";
echo"<fontcolor='#0000FF'>图片大小：$img</font><br/>";
echo"图片预览：<br><divstyle='border:#F001pxsolid;width:200px;height:200px'>
<imgsrc="".$picName.""width=200pxheight=200px>".$fname."</div>";
*/
echo'{"imgurl":"http://localhost/uploads/cloudy'.$fname.'"}';
}
}
}
B. jquery 插件批量上传图片 的那个oncomplete回调函数排版为什么我后面的图片会盖掉前面的文本框
按照hmtl的标准来的话 图片是会覆盖任何html控件的 唯一的办法就是让他们错开 也就是把图片移开一点 设置position:absolute left和top就可以对其进行定位
C. uploadify批量上传
创建了一个web project
commons-fileupload-1.2.2.jar
commons-io-2.0.1.jar
首先把这两个jar文件引入了path
然后创建了一个servlet
Upload.java（用的MyEclipse自动配置了web.xml部署描述符）
[java] view plain
//Upload.java
package com.uploadify.servlet;
import java.io.File;
import java.io.IOException;
import java.util.Iterator;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import com.uploadify.utils.IPTimeStamp;
public class Upload extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String savePath = this.getServletConfig().getServletContext()
.getRealPath("");
// 得到项目的工作目录
savePath = savePath + "/uploads/";
File f1 = new File(savePath);
// 如果没有的话就创建目录
if (!f1.exists()) {
f1.mkdirs();
}
DiskFileItemFactory fac = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(fac);
upload.setHeaderEncoding("utf-8");
List fileList = null;
try {
fileList = upload.parseRequest(request);
} catch (FileUploadException ex) {
return;
}
Iterator<FileItem> it = fileList.iterator();
String name = "";
String extName = "";
while (it.hasNext()) {
FileItem item = it.next();
if (!item.isFormField()) {
// 解析文件
name = item.getName();
long size = item.getSize();
String type = item.getContentType();
if (name == null || name.trim().equals("")) {
continue;
}
// 得到文件的扩展名
if (name.lastIndexOf(".") >= 0) {
extName = name.substring(name.lastIndexOf("."));
}
File file = null;
do {
// 利用客户端IP+时间+三位随机数字生成非重复文件名：
name = new IPTimeStamp().getIPTimeStampRandom();
file = new File(savePath + name + extName);
} while (file.exists());
File saveFile = new File(savePath + name + extName);
try {
item.write(saveFile);
} catch (Exception e) {
e.printStackTrace();
}
}
}
response.getWriter().print(name + extName);
}
}
生成文件名字的Utils类，可以清楚的记录名字，然后对上传的文件进行处理，并且防止文件名字重复
[java] view plain
//PTimeStamp.java
package com.uploadify.utils;
import java.net.InetAddress;
import java.net.UnknownHostException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Random;
public class IPTimeStamp {
private String ip;
private Date date;
private SimpleDateFormat format;
public IPTimeStamp() {
try {
ip = InetAddress.getLocalHost().getHostAddress();
} catch (UnknownHostException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
public String getTimeStamp() {
format = new SimpleDateFormat("yyyyMMddHHmmssSSS");
return format.format(new Date());
}
public String addZero(String str, int len) {
StringBuffer sb = new StringBuffer();
sb.append(str);
while (sb.length() < len) {
sb.insert(0, "0");
}
return sb.toString();
}
public String getIPTimeStampRandom() {
StringBuffer sb = new StringBuffer();
String[] ips = this.ip.split("\\.");
for (int j = 0; j < ips.length; j++) {
// System.out.println(ips[j]);
sb.append(this.addZero(ips[j], 3));
}
sb.append(this.getTimeStamp());
Random rod = new Random();
for (int i = 0; i < 3; i++) {
sb.append(rod.nextInt(10));
}
return sb.toString();
}
}
部署描述符
[html] view plain
<!--web.xml-->
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>Upload</servlet-name>
<servlet-class>com.uploadify.servlet.Upload</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Upload</servlet-name>
<url-pattern>/Upload</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
在WebROOT下面创建folder->js
放入解压包里面的
jquery.uploadify.v2.1.4.js
jquery.uploadify.v2.1.4.min.js
jquery-1.4.2.min.js
swfobject.js
css->
uploadify.css
images->
cancel.png
[html] view plain
<!--index.jsp-->
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link href="css/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/jquery.uploadify.v2.1.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#uploadify").uploadify({
'uploader' : 'uploadify.swf',
'script' : 'Upload',
'cancelImg' : 'images/cancel.png',
'folder' : 'uploads',
'queueID' : 'fileQueue',
'auto' : false,
'multi' : true,
'simUploadLimit' : 2,
'buttonText' : 'BROWSE'
});
});
</script>
</head>
<body>
<div id="fileQueue"></div>
<input type="file" name="uploadify" id="uploadify" />
<p>
<a href="javascript:jQuery('#uploadify').uploadifyUpload()">开始上传</a>
<a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消所有上传</a>
</p>
</body>
</html>
D. 求大神，给个MVC3.0以上ef 架构的 jquery的图片批量上传实例，可将实例上传到知道上，再此拜谢各位
批量上传一般用的都是用jquery+ajax来实现，基本没人用C#语言去写。
去下载一个jquery+ajax批量上传插件，引入你的项目就可以了
E. jquery 多个 上传文件教程
jquery 实现多个上传文件教程：
首先创建解决方案,添加jquery的js和一些资源文件(如图片和进度条显示等):
jquery-1.3.2.min.js
jquery.uploadify.v2.1.0.js
jquery.uploadify.v2.1.0.min.js
swfobject.js
uploadify.css
1、页面的基本代码如下
这里用的是aspx页面(html也是也可的)
页面中引入的js和js函数如下：
<scriptsrc="js/jquery-1.3.2.min.js"type="text/javascript"></script>
<scriptsrc="js/jquery.uploadify.v2.1.0.js"type="text/javascript"></script>
<scriptsrc="js/jquery.uploadify.v2.1.0.min.js"type="text/javascript"></script>
<scriptsrc="js/swfobject.js"type="text/javascript"></script>
<linkhref="css/uploadify.css"rel="stylesheet"type="text/css"/>
</script>
js函数：
<scripttype="text/javascript">
$(document).ready(function(){
$("#uploadify").uploadify({
'uploader':'image/uploadify.swf',//uploadify.swf文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后淡出打开文件对话框
'script':'Handler1.ashx',//script：后台处理程序的相对路径
'cancelImg':'image/cancel.png',
'buttenText':'请选择文件',//浏览按钮的文本，默认值：BROWSE。
'sizeLimit':999999999,//文件大小显示
'floder':'Uploader',//上传文件存放的目录
'queueID':'fileQueue',//文件队列的ID，该ID与存放文件队列的div的ID一致
'queueSizeLimit':120,//上传文件个数限制
'progressData':'speed',//上传速度显示
'auto':false,//是否自动上传
'multi':true,//是否多文件上传
//'onSelect':function(e,queueId,fileObj){
//alert("唯一标识:"+queueId+" "+
//"文件名："+fileObj.name+" "+
//"文件大小："+fileObj.size+" "+
//"创建时间："+fileObj.creationDate+" "+
//"最后修改时间："+fileObj.modificationDate+" "+
//"文件类型："+fileObj.type);
//}
'onQueueComplete':function(queueData){
alert("文件上传成功！");
return;
}
});
});
页面中的控件代码：
<body>
<formid="form1"runat="server">
<divid="fileQueue">
</div>
<div>
<p>
<inputtype="file"name="uploadify"id="uploadify"/>
<inputid="Button1"type="button"value="上传"onclick="javascript:$('#uploadify').uploadifyUpload()"/>
<inputid="Button2"type="button"value="取消"onclick="javascript:$('#uploadify').uploadifyClearQueue()"/>
</p>
</div>
</form>
</body>
函数主要参数：
$(document).ready(function(){
$('#fileInput1').fileUpload({
'uploader':'uploader.swf',//不多讲了
'script':'/AjaxByJQuery/file.do',//处理Action
'cancelImg':'cancel.png',
'folder':'',//服务端默认保存路径
'scriptData':{'methed':'uploadFile','arg1','value1'},
//向后台传递参数,methed,arg1为参数名,uploadFile,value1为对应的参数值,服务端通过request["arg1"]
'buttonText':'UpLoadFile',//按钮显示文字,不支持中文,解决方案见下
//'buttonImg':'图片路径',//通过设置背景图片解决中文问题,就是把背景图做成按钮的样子
'multi':'true',//多文件上传开关
'fileExt':'*.xls;*.csv',//文件过滤器
'fileDesc':'.xls',//文件过滤器详解见文档
'onComplete':function(event,queueID,file,serverData,data){
//serverData为服务器端返回的字符串值
alert(serverData);
}
});
});后台一般处理文件：
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.IO;
usingSystem.Net;
usingSystem.Web;
usingSystem.Web.Services;
namespacefupload
{
///<summary>
///Handler1的摘要说明
///</summary>
publicclassHandler1:IHttpHandler
{
publicvoidProcessRequest(HttpContextcontext)
{
context.Response.ContentType="text/plain";
HttpPostedFilefile=context.Request.Files["Filedata"];//对客户端文件的访问
stringuploadPath=HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\";//服务器端文件保存路径
if(file!=null)
{
if(!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);//创建服务端文件夹
}
file.SaveAs(uploadPath+file.FileName);//保存文件
context.Response.Write("上传成功");
}
else
{
context.Response.Write("0");
}
}
publicboolIsReusable
{
get
{
returnfalse;
}
}
}
}
以上方式基本可以实现多文件的上传，大文件大小是在控制在10M以下/。
F. jquery批量上传图片插件uploadify 的例子 可以用的
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<metahttp-equiv='Content-Type'content='text/html;charset=utf-8'/>
<title>Fileupload</title>
<linkrel="Stylesheet"href="js/Plug-in/jquery.uploadify/uploadify.css"/>
<scripttype="text/javascript"src="js/Plug-in/jquery.uploadify/jquery-1.3.2.min.js"></script>
<scripttype="text/javascript"src="js/Plug-in/jquery.uploadify/swfobject.js"></script>
<scripttype="text/javascript"src="js/Plug-in/jquery.uploadify/jquery.uploadify.v2.1.0.min.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("#uploadify").uploadify({
'uploader':'js/Plug-in/jquery.uploadify/uploadify.swf',
'script':'uploadify.php',
'cancelImg':'js/Plug-in/jquery.uploadify/cancel.png',
'folder':'uploadfile',
'queueID':'fileQueue',
'auto':false,
'multi':true,
});
});
</script>
</head>
<body>
MAX:20M
</BR>
<inputtype="file"name="uploadify"id="uploadify"/>
<ahref="javascript:$('#uploadify').uploadifyUpload()">Upload</a>|<ahref="javascript:$('#uploadify').uploadifyClearQueue()">cancel</a>
<divid="fileQueue"></div>
</body>
</html>
后台uploadify.php
<?php
/*
Uploadifyv2.1.0
ReleaseDate:August24,2009
Copyright(c)2009RonnieGarcia,TravisNickels
Permissionisherebygranted,freeofcharge,toanypersonobtaininga
(the"Software"),todeal
,
touse,,modify,merge,publish,distribute,sublicense,and/orsell
copiesoftheSoftware,
furnishedtodoso,:
.
THESOFTWAREISPROVIDED"ASIS",WITHOUTWARRANTYOFANYKIND,EXPRESSOR
IMPLIED,,
.INNOEVENTSHALLTHE
,DAMAGESOROTHER
LIABILITY,WHETHERINANACTIONOFCONTRACT,TORTOROTHERWISE,ARISINGFROM,
THESOFTWARE.
*/
if(!empty($_FILES)){
$tempFile=$_FILES['Filedata']['tmp_name'];
$targetPath=$_SERVER['DOCUMENT_ROOT'].$_REQUEST['folder'].'/';
$targetFile=str_replace('//','/',$targetPath).$_FILES['Filedata']['name'];
$targetFile=iconv("utf-8","gbk",$targetFile);
move_uploaded_file($tempFile,$targetFile);
echo"1";
}
?>
G. jquery 向action提交批量上传图片数据，得不到数据
什么叫得不到数据？后台没有接收到数据还是前台没有得到返回值？
H. jqueryuploadify上传超过300张图片时出错
错误表现为部分文件没有加载到队列里， 实际为数据太多，问题可能
1 浏览器本身的限制
2 缓存的限制
3 其他限制
建议以合适的数量分批次上传
I. jquery 上传文件插件uploadify jsp版本
写一个servlet，看这里
http://www.javaeye.com/topic/376101
J. 我需要一个js或者jquery能批量上传图片+预览的功能。急~~~急~~~急~~
WebUploader项目，符合你的要求。
//文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress',function(file,percentage){
var$li=$('#'+file.id),
$percent=$li.find('.progressspan');
//避免重复创建
if(!$percent.length){
$percent=$('<pclass="progress"><span></span></p>')
.appendTo($li)
.find('span');
}
$percent.css('width',percentage*100+'%');
});
//文件上传成功，给item添加成功class,用样式标记上传成功。
uploader.on('uploadSuccess',function(file){
$('#'+file.id).addClass('upload-state-done');
});
//文件上传失败，显示上传出错。
uploader.on('uploadError',function(file){
var$li=$('#'+file.id),
$error=$li.find('div.error');
//避免重复创建
if(!$error.length){
$error=$('<divclass="error"></div>').appendTo($li);
}
$error.text('上传失败');
});
//完成上传完了，成功或者失败，先删除进度条。
uploader.on('uploadComplete',function(file){
$('#'+file.id).find('.progress').remove();
});
更多细节，请查看js源码。