uploadify自动上传
㈠ 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";
}
?>
㈡ uploadify文件上传失败，怎么重新上传
用户出现uploadifyio error错误的原因总结有一下几点：
1、用户文件是打开状态
2、用户杀毒软件造成
3、服务器端安全扫描设置开启
4、服务器端php配置上传文件设置问题
重点说下问题3,4两点的解决之道。
问题3：
在网站根目录添加.htaccess文件，内容如下:
# 安全扫描设置
<IfMole mod_security.c>
# 禁止对 POST 数据进行安全扫描，使不中断多文件上传等功能
SecFilterEngine Off
SecFilterScanPOST Off
</IfMole>
问题4：
修改php配置文件 /etc/php5/apache2/php.ini 下的File Uploads：
file_uploads = On
upload_max_filesize = 100M
max_file_uploads = 30
max_execution_time = 300
如果是niginx，需要设置配置文件的：client_max_body_size 50M;
修改配置文件之后，记得重启！
这就是解决uploadify io error 的方法。
㈢ 如何用Ajax实现多文件上传
jquery 实现多个上传文件教程：
首先创建解决方案,添加jquery的js和一些资源文件(如图片和进度条显示等):
1
2
3
4
5
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函数如下：
1
2
3
4
5
6
7
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.uploadify.v2.1.0.js" type="text/javascript"></script>
<script src="js/jquery.uploadify.v2.1.0.min.js" type="text/javascript"></script>
<script src="js/swfobject.js" type="text/javascript"></script>
<link href="css/uploadify.css" rel="stylesheet" type="text/css" />
</script>
js函数：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script type="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 + "\r\n" +
// "文件名：" + fileObj.name + "\r\n" +
// "文件大小：" + fileObj.size + "\r\n" +
// "创建时间：" + fileObj.creationDate + "\r\n" +
// "最后修改时间：" + fileObj.modificationDate + "\r\n" +
// "文件类型：" + fileObj.type);
// }
'onQueueComplete': function (queueData) {
alert("文件上传成功！");
return;
}
});
});
页面中的控件代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
<form id="form1" runat="server">
<div id="fileQueue">
</div>
<div>
<p>
<input type="file" name="uploadify" id="uploadify"/>
<input id="Button1" type="button" value="上传" onclick="javascript: $('#uploadify').uploadifyUpload()" />
<input id="Button2" type="button" value="取消" onclick="javascript:$('#uploadify').uploadifyClearQueue()" />
</p>
</div>
</form>
</body>
函数主要参数：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(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);
}
});
});
后台一般处理文件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
using System;
using System.Collections.Generic;
using System.Linq;
using System.IO;
using System.Net;
using System.Web;
using System.Web.Services;
namespace fupload
{
/// <summary>
/// Handler1 的摘要说明
/// </summary>
public class Handler1 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
HttpPostedFile file = context.Request.Files["Filedata"];//对客户端文件的访问
string uploadPath = 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");
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
以上方式基本可以实现多文件的上传，大文件大小是在控制在10M以下/。
㈣ .net网站，文件上传控件
uploadify控件
js: $("#uploadify_HB_SZGT").uploadify({
'swf': '../JS/uploadify/uploadify.swf',
'uploader': '../JS/uploadify/upload_HB_SZGT.ashx',
'buttonText': '添加附件',
'buttonClass': 'button-class',
'buttonCursor': 'hand',
'fileSizeLimit': '2097152KB',
'fileTypeExts': '*.gif; *.jpg; *.png;*.pdf;*.txt;*.doc;*.wps;*.xls;*.jpeg',
'folder': 'dzka_ba',
'queueID': 'fileQueue',
'auto': true,
'multi': false,
'fileObjName': 'Filedata',
'method': 'GET',
'removeCompleted': false,
'onUploadStart': function (file) {
//设置值
var fj_sbxh = $("#ContentPlaceHolder1_hidSBXH").val();
if (fj_sbxh == "") {
alert("请您先登录");
return;
}
var fj_dzzlzlbh = $("#slDZZLZL").val(); //单证种类编号
var fj_dzzlzlmc = $("#slDZZLZL").find("option:selected").text(); //单证种类名称
var fj_sblx = $("#txtSBLX").val(); //申报类型
var fj_QFRQ = ($("#txtQFRQ").val() == "") ? "E" : $("#txtQFRQ").val(); //签发日期
var fj_YXQ = ($("#txtYXQ").val() == "") ? "E" : $("#txtYXQ").val(); //有效期
var fj_SFHL = ($("#txtSFHL").val()=="") ? "E" : $("#txtSFHL").val();//水份含量
var fj_CXGJZ = ($("#txtCXGJZ").val() == "") ? "E" : $("#txtCXGJZ").val(); //查询关键字
var fj_WJLX = $("#slWJLX").val(); //文件类型
$("#uploadify_HB_SZGT").uploadify("settings", "formData", { 'cs_dzzlzlbh': fj_dzzlzlbh, 'cs_dzzlzlmc': fj_dzzlzlmc, 'cs_sblx': fj_sblx,'cs_SFHL':fj_SFHL, 'cs_QFRQ': fj_QFRQ, 'cs_YXQ': fj_YXQ,'cs_CXGJZ': fj_CXGJZ, 'cs_WJLX': fj_WJLX, 'cs_sbxh': fj_sbxh});
}
});
ashx：
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Charset = "utf-8";
string sbxh = context.Request.Form["cs_sbxh"].ToString();
string dzzlzlbh = context.Request.Form["cs_dzzlzlbh"].ToString();
string dzzlzlmc = context.Request.Form["cs_dzzlzlmc"].ToString();
string sblx = context.Request.Form["cs_sblx"].ToString();
string first_CXGJZ = context.Request.Form["cs_CXGJZ"].ToString();
string CXGJZ = (first_CXGJZ == "E") ? "" : first_CXGJZ;
string WJLX = context.Request.Form["cs_WJLX"].ToString();
HttpPostedFile file = context.Request.Files["Filedata"];
string uploadPath =
HttpContext.Current.Server.MapPath(context.Request.ApplicationPath) + "czkh_file\\wxp\\cs\\";
if (file != null)
{
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
//如果Session不能用的话，用Cache
//检测是否存在相同文件名的文件
string filename = file.FileName.ToString();
string hz = filename.Substring(filename.LastIndexOf("."));//后缀名
//“DZKA_WXPHS_”+申报序号+“_”+单证种类编号+“_”+顺序号+“.”+文件后缀
string fileSavePath = Function.getUniqueName(uploadPath + "DZKA_WXPCS_" + sbxh + "_" + dzzlzlbh+ hz);
string wjccmc = fileSavePath.Substring(fileSavePath.LastIndexOf("\\")+1);//文件存储名称
string wjxdlj = "/czkh_file/wxp/cs";//文件相对路径
file.SaveAs(fileSavePath);
int zlxh;
DataTable dtxh = C_WXP_FSZL.getmaxXH(new OracleParameter(":SBXH", sbxh),
new OracleParameter(":SBLX", sblx),
new OracleParameter(":DZZLBH", dzzlzlbh));
if (dtxh.Rows.Count > 0)
{
string strxh = dtxh.Rows[0]["XH"].ToString();
if (string.IsNullOrEmpty(strxh))
{
zlxh = 1;
}
else
{
zlxh = Convert.ToInt32(strxh) + 1;
}
}
else
{
zlxh = 1;
}
C_WXP_FSZL.insert(new OracleParameter(":SBXH", sbxh),
new OracleParameter(":SBLX", sblx),
new OracleParameter(":DZZLBH", dzzlzlbh),
new OracleParameter(":HWXH", "0"),
new OracleParameter(":XH",zlxh),
new OracleParameter(":ZLBH", ""),
new OracleParameter(":ZLMC", dzzlzlmc),
new OracleParameter(":JYBH", ""),
new OracleParameter(":QFRQ", ""),
new OracleParameter(":YXQ", ""),
new OracleParameter(":NJRQ", ""),
new OracleParameter(":HWMC", ""),
new OracleParameter(":SDLB", ""),
new OracleParameter(":WJMC", filename),
new OracleParameter(":ZJS", ""),
new OracleParameter(":BCSYJS", ""),
new OracleParameter(":SYJS", ""),
new OracleParameter(":GS", ""),
new OracleParameter(":SFCFSY", ""),
new OracleParameter(":YFHL", ""),
new OracleParameter(":SFHL", ""),
new OracleParameter(":DD", ""),
new OracleParameter(":SJ", ""),
new OracleParameter(":SFYQX", ""),
new OracleParameter(":QXJZQK", ""),
new OracleParameter(":MC", ""),
new OracleParameter(":SFJGJY", ""),
new OracleParameter(":JYRQ", ""),
new OracleParameter(":ZHBZFA", ""),
new OracleParameter(":WJXDLJ",wjxdlj),
new OracleParameter(":WJCCMC",wjccmc));
//下面这句代码缺少的话，上传成功后上传队列的显示不会自动消失
context.Response.Write("1");
}
else
{
context.Response.Write("0");
}
}
㈤ jquery.uploadify 能否实现分片上传
简单实现限制uploadify上传个数
?
123456789101112131415161718
function deleteUrl(){ $("body").on("click",".img-wrap .mask span",function(event){ event.stopPropagation(); var qs=$('#file_upload-queue>div');//所有的队列 var id=qs.eq(2).attr('id');//得到第三个队列的id $('#uploadTowedAccredit').uploadify('cancel',id);//这样就行了，会自动重置队列数量和删除dom对象，不能直接qs.eq(2).remove()，无效 /* if(!window.confirm("您确定删除附件？")){ return; } var imgUrl=$(this).parents(".img-wrap").find("img").attr("src"); deleteImage(imgUrl); $(this).parents(".img-wrap").remove(); */ });};
?
12345678
<li class="blockli clearfix" style="padding-bottom: 5px;"> <span class="left-name"><em class="red-star">*</em>拖机授权委托书：</span> <div class="upload-wrap" style="width:100px;"> <input type="file" name="uploadTowedAccredit" id="uploadTowedAccredit" class="filetext"/> </div> <span id="uploadTowedAccreditLinkTip" class="warn-tips"><em></em>请上传附件，最多上传${towedAccreditPicMax} 张</span> <div id="towedAccreditDiv" class="up-img-list clearfix"></div></li>
?
// 上传拖机授权委托书function uploadTowedAccreditInit(){ $("#uploadTowedAccredit").uploadify({ 'hideButton':'true', 'preventCaching' : 'true', 'checkExisting':'true', 'swf': SWF, 'uploader':uploadImg, 'debug':false, 'multi': true, 'method': 'post', 'preventCaching' : true, 'removeCompleted' : true, 'removeTimeout' : 10, 'requeueErrors' : true, 'successTimeout' : 30, 'uploadLimit' : ${towedAccreditPicMax}, 'fileObjName' : 'Filedata', //单张图片最大限制 'fileSizeLimit' : '1024KB', 'fileTypeDesc' : 'Image Files', //仅限上传jpg格式图片 'fileTypeExts' : '*.jpg;*.png', 'height': 24, 'width':73, 'buttonText' : '上传附件', 'auto': true, 'buttonClass':'uploada btn-fff-24', 'onSWFReady' : function() { },
㈥ javaWEB项目中如何实现批量选择文件并上传呢有什么好的插件，最好有相关代码例子
jquery.uploadify批量上传控件
[html]
<linkhref="styles/uploadify.css"rel="stylesheet"type="text/css"/>
<scripttype="text/javascript"src="styles/uploadify.swf"></script>
<scripttype="text/javascript"src="javascripts/jquery.uploadify.min.js"></script>
<linkhref="styles/uploadify.css"rel="stylesheet"type="text/css"/>
<scripttype="text/javascript"src="styles/uploadify.swf"></script>
<scripttype="text/javascript"src="javascripts/jquery.uploadify.min.js"></script>还有jquery.js,你懂得!
这里注意哦,css文件会引用到这个图片哦,所以请你指定这个图片的位置哦,不然就没有显示这个叉叉哦,这个叉叉是删除按钮的哦,没有就是空白哦!
[javascript]
<script>
functionsnedUpLoad(){
varpid=$("#entityId").val();//这个是我自己获取的自定义参数
varentityName=$("#entityName").val();//同上
$("#uploadify").uploadify({//初始化uploadifyuploadify是input的id
//'debug':false,//bug模式,默认是false
'auto':false,//自动上传,就是控件自动上传,默认是true
'multi':true,
//'successTimeout':99999,//超时时间
'formData':{'pid':pid,'entityName':entityName},//我的参数列表
//'fileObjName':'uploadify',//服务器的属性名字
'uploader':'你的后台url地址;jsessionid=${pageContext.session.id}',//提交服务器路径,这里
说明下;jsessionid=${pageContext.session.id},这个是用于非IE内核的浏览器兼容的
'swf':"styles/uploadify.swf",//flash文件,官方的文件,引用上就是了
//'uploader':'/Home/Upload',//文件保存路径用处不大
'buttonText':'文件上传',//按钮
//'height':'32',//浏览按钮的高度
//'width':'100',//浏览按钮的宽度
'fileTypeDesc':'支持的格式：',//在浏览窗口底部的文件类型下拉菜单中显示的文本
'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png',//允许上传的文件后缀
'fileSizeLimit':'3MB',//上传文件的大小限制
'queueSizeLimit':25,//上传数量
'onSelectError':function(file,errorCode,errorMsg){//返回一个错误，选择文件的时候触发
switch(errorCode){
case-100:
alert("上传的文件数量已经超出系统限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"个文件！");
break;
case-110:
alert("文件["+file.name+"]大小超出系统限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小！");
break;
case-120:
alert("文件["+file.name+"]大小异常！");
break;
case-130:
alert("文件["+file.name+"]类型不正确！");
break;
}
},
'onFallback':function(){//检测FLASH失败调用
alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");
},
'onUploadSuccess':function(file,data,response){//上传到服务器，服务器返回相应信息到data里
if(data){
vardataObj=eval("("+data+")");//转换为json对象
//$('#uploadify').uploadify('upload')
}
}
});
}
</script>
<script>
functionsnedUpLoad(){
varpid=$("#entityId").val();//这个是我自己获取的自定义参数
varentityName=$("#entityName").val();//同上
$("#uploadify").uploadify({//初始化uploadifyuploadify是input的id
//'debug':false,//bug模式,默认是false
'auto':false,//自动上传,就是控件自动上传,默认是true
'multi':true,
//'successTimeout':99999,//超时时间
'formData':{'pid':pid,'entityName':entityName},//我的参数列表
//'fileObjName':'uploadify',//服务器的属性名字
'uploader':'你的后台url地址;jsessionid=${pageContext.session.id}',//提交服务器路径,这里
说明下;jsessionid=${pageContext.session.id},这个是用于非IE内核的浏览器兼容的
'swf':"styles/uploadify.swf",//flash文件,官方的文件,引用上就是了
//'uploader':'/Home/Upload',//文件保存路径用处不大
'buttonText':'文件上传',//按钮
//'height':'32',//浏览按钮的高度
//'width':'100',//浏览按钮的宽度
'fileTypeDesc':'支持的格式：',//在浏览窗口底部的文件类型下拉菜单中显示的文本
'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png',//允许上传的文件后缀
'fileSizeLimit':'3MB',//上传文件的大小限制
'queueSizeLimit':25,//上传数量
'onSelectError':function(file,errorCode,errorMsg){//返回一个错误，选择文件的时候触发
switch(errorCode){
case-100:
alert("上传的文件数量已经超出系统限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"个文件！");
break;
case-110:
alert("文件["+file.name+"]大小超出系统限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小！");
break;
case-120:
alert("文件["+file.name+"]大小异常！");
break;
case-130:
alert("文件["+file.name+"]类型不正确！");
break;
}
},
'onFallback':function(){//检测FLASH失败调用
alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");
},
'onUploadSuccess':function(file,data,response){//上传到服务器，服务器返回相应信息到data里
if(data){
vardataObj=eval("("+data+")");//转换为json对象
//$('#uploadify').uploadify('upload')
}
}
});
}
</script>
[javascript]
$(function(){
snedUpLoad();//jquery容器加载完运行我们的函数
})
$(function(){
snedUpLoad();//jquery容器加载完运行我们的函数
})
[html]
<inputtype="file"name="uploadify"id="uploadify"/>//申明控件的容器
<inputtype="file"name="uploadify"id="uploadify"/>//申明控件的容器
前台页面代码基本就这样了,很好明白,至于后台逻辑和普通上传处理一致的,这里就不列出来的,最后上一张图给大家鉴赏一下
(tip:其实他的批量上传并不是一次全部提交处理的,他是一个一个依次提交,相当是一个for循环,所以后台处理的同时只是一个文件上传,即排序的处理上传文件,就和单个文件上传的代码一样,如果你早有后台的单文件上传代码就不用改,直接调用就行了,可以共用)
㈦ jsp页面实现图片预览，截取和上传
比较常用，而且简单易用的jquery-uploadify插件，支持带进度的多线程上传
用到的是flash的跨域上传模型，这里不用深究
基本文件大致包括
jquery-x.x.x.js
jquery.uploadify.x.js
uploadify.swf
uploadify.css
使用方式：
$(function(){
$("#fileId").uploadify({
width:42,
height:32,
swf:'js/uploadify.swf',
uploader:'upload.do;jsessionid=<%=session.getId()%>',
buttonImage:'image/movetophone_white.png',
fileSizeLimit:2048,
fileObjName:"imgFile",
method:'post',
removeCompleted:true,
fileTypeExts:"*.gif;*.jpg;*.png;*.jpeg;*.bmp",
onSelectError:function(file,errorCode,errorMsg){
alert("文件过大");
},
onUploadStart:function(file){
},
onUploadSuccess:function(file,data,response){
alert("上传完成");
},
onUploadError:function(file,errorCode,errorMsg){
alert(errorMsg);
}
});
});
<inputtype="file"id="fileId"/>另，工程中需要引入commons-fileupload的包。