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源碼。