jquery批量上传文件
㈠ 如何实现Jquery的LigerUI文件上传
实现Jquery的LigerUI文件上传的实现方法：
1、在head标签中加入js引用：
<script src="../lib/js/ajaxfileupload.js" type="text/javascript"></script>
<script src="../lib/js/ligerui.expand.js" type="text/javascript"></script>
2、定义上传表格：
<div id="AppendBill_Div" style="display:none;"> <%-- 上传表单 --%>
<table style="height:100%;width:100%">
<tr style="height:40px">
<td style="width:20%">
图标:
</td>
<td><input type="file" style="width:200px" id="fileupload" name="fileupload"/>
</td>
</tr>
</table>
3、编写上传的js逻辑
1、grid中添加项【存地址字段】
{ display: "扫描件", name: "AppendBillPath", width: 120, type: "text", align: "left" }
2、Form可添加项【存地址和弹出选择框】
{ name: "AppendBillPath1", type: "hidden" },
{ display: "扫描件", name: "AppendBillPath", comboboxName: "AppendBillPath2", newline: true, labelWidth: 100, width: 150, space: 30, type: "select", options: {}}
$.ligerui.get("AppendBillPath2").set('onBeforeOpen', f_selectAppendBillPath_1)
3、事件
// #region ======================================= 【上传扫描件窗口】
var AppendBillPathDetail = null;
function f_selectAppendBillPath_1() {
var imageurl = $("#AppendBill").val();
var AppendBill_Id = $("#AppendBill").val(); // 单号
if (imageurl.length == 0) {
LG.showError("您没有输入单号，请输入随单号！");
return;
}
if (AppendBillPathDetail) {
AppendBillPathDetail.show();
}else {
AppendBillPathDetail = $.ligerDialog.open({
target: $("#AppendBill_Div"), title: '添加图标',
width: 360, height: 170, top: 170, left: 280, // 弹出窗口大小
buttons: [
{ text: '上传', onclick: function () { AppendBillPath_save(); } },
{ text: '取消', onclick: function () { AppendBillPathDetail.hide(); } }
]
});
}
}
㈡ 有哪些好用的 jQuery 图片上传插件
1、uploadify
它是针对jQuery的免费文件上传插件，可以轻松将单个或多个文件上传到网站上，可控制并发上传的文件数，通过接口参数和CSS控制外观。Web服务器需支持flash和后端开发语言。
2、FancyUpload
它是一个由CSS和XHTML编写样式的Ajax文件上传工具，安装简便，服务器独立，由MooTools模块驱动，可以在任何现代浏览器上使用。
3、Aurigma Upload Suite(Image Uploader)
这是一个不限大小，不限格式的文件/图片批量上传工具，是收费控件。它支持云端存储和客户端文件处理，支持断点续传，稳定可靠。从8.0.8开始，Image Uploader将名称改为"Aurigma Upload Suite"。
㈢ 如何实现Jquery的LigerUI文件上传
一 在Head中加入
<script src= /lib/js/ajaxfileupload js type=text/javascript></script> <script src= /lib/js/ligerui expand js type=text/javascript></script>
二 Html中的Div代码
<div id="AppendBill_Div" > <% 上传 单 %> <table > <岁猛tr > <td > 图标: </td> <td><input type=file id="fileupload" name=fileupload/> </td> </tr> </table> </div>
三 Js中 写的是关键部分 会LigerUI的朋友 你懂得
grid中添加乎模桥项【存地址字段】 { display: "扫描件" name: "AppendBillPath" width: type: "text" align: "left" } Form可添加项【存地址和弹出选择框】
{ name: "AppendBillPath " type: "hidden" } // 上传 【 】 { display: "扫描件" name: "AppendBillPath" boboxName: "AppendBillPath " newline: true labelWidth: width: space: type: "select" options: {}} // 上传 【 】 $ ligerui get("AppendBillPath ") set( onBeforeOpen f_selectAppendBillPath_ ) // 【扫描件】 // 上传 【 】 事件
// #region ======================================= 【上传扫描件窗口】 // 上传 【 】
var AppendBillPathDetail = null; function f_selectAppendBillPath_ () { var imageurl = $("#AppendBill") val(); var AppendBill_Id = $("#AppendBill") val(); // 单号 if (imageurl length == ) { LG showError("您没有输入单号 请输入随单号！"); return; }
if (AppendBillPathDetail) { AppendBillPathDetail show();
} else {
AppendBillPathDetail = $ ligerDialog open({ target: $("#AppendBill_Div") title: 添加图标 width: height: top: left: // 弹出窗口大小 buttons: [ { text: 上传 onclick: function () { AppendBillPath_save(); } } { text: 取消 onclick: function () { AppendBillPathDetail hide(); } } ] }); } }
function AppendBillPath_save() {
var imgurl = $("#fileupload") val(); // var filehelpcode = $("#filehelpcode") val();
var extend = imgurl substring(imgurl lastIndexOf(" ") imgurl length); extend = extend toLowerCase(); if (extend == " jpg" || extend == " jpeg" || extend == " png" || extend == " gif" || extend == " bmp") { } else {
LG showError("请上传jpg jpep png gif bmp格式码简的图片文件");
return; } var imageurl = $("#AppendBill") val(); // extend alert(imageurl);
$ ajaxFileUpload({ url: " /handle/ImageUpload aspx?imageurl=" + imageurl // 上传 【 】 aspx文件 secureuri: false fileElementId: "fileupload" //Input file id
dataType: "text" success: function (data status) {
// // 保存路径
// $("#AppendBillPath ") val(Data); LG tip(data); f_reload(); } error: function (data status e) { LG showError(data);
} });
}
// #endregion 四 后台cs 写一句关键的 可以返回参数 前台提示
lishixin/Article/program/Java/JSP/201311/20623
㈣ 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.'"}';
}
}
}
㈤ eclipes上传图片的插件叫什么名字
eclipes上传图片的插件是Uploadify插件，Uploadify是来自国外的一款优秀jQuery插件，主要功能是批量上传文件，此插件在项目中已被广泛之用。
㈥ 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";
}
?>
㈦ WCF 中怎么使用 jquery 异步上传多个文件
在服务器端 InputStream 返回的是一个数组，也就是运行前端提交多个file元素
如果WCF 无法截获 InputStream，你可以在前端将文件 转换Base64 字符串 做为参数 提交，服务端接收到再将字符串转换成文件
㈧ jquery Uploadify上传文件
Uploadify是JQuery的一个上传插件，实现的效果非常不错，带进度显示。不过官方提供的实例时php版本的，本文将详细介绍Uploadify在Aspnet中的使用，您也可以点击下面的链接进行演示或下载。
首先按下面的步骤来实现一个简单的上传功能。
1 创建Web项目，命名为JQueryUploadDemo，从官网上下载最新的版本解压后添加到项目中。
2 在项目中添加UploadHandler.ashx文件用来处理文件的上传。
3 在项目中添加UploadFile文件夹，用来存放上传的文件。
进行完上面三步后项目的基本结构如下图:
㈨ 我需要一个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源码。