jquery多文件上傳插件
Ⅰ 如何實現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 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源碼。
Ⅳ 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.'"}';
}
}
}
Ⅳ 如何用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以下/。
Ⅵ js 上傳多照片的功能
Jquyer有一個uploadify插件，簡潔易用，支持多文件上傳。之前用這個寫過上傳頭像的功能，歡迎追問。
Ⅶ 請問ASP要如何使用jquery的插件uploadify，官網上的只有PHP的
Uploadify簡單說來，是基於Jquery的一款文件上傳插件。它的功能特色總結如下：
支持單文件或多文件上傳，可控制並發上傳的文件數
在伺服器端支持各種語言與之配合使用，諸如PHP,.NET,Java……
通過參數可配置上傳文件類型及大小限制
通過參數可配置是否選擇文件後自動上傳
易於擴展，可控制每一步驟的回調函數(onSelect, onCancel……)
通過介面參數和CSS控制外觀
更多……
相關鏈接
Uploadify主頁地址：http://www.uploadify.com/ 在該頁面你可以了解到關於他的更多內容。
Uploadify在線演示：在線Demo
Uploadify配置參數及介面文檔：http://www.uploadify.com/documentation
Uploadify插件下載地址：http://www.uploadify.com/download
使用方法
下載插件安裝包後，可以看到裡面的幾個主要文件：jquery.uploadify.js(完成上傳功能的腳本文件，在調用頁面引用)、uploadify.css(外觀樣式表)、uploader.swf(上傳控制項的主體文件，flash控制項)、upload.php(伺服器端處理文件，官方僅提供了php版的)
引用了插件文件後，在頁面中做如下調用：
//聲明一個普通的html文件上傳控制項，並指定id
<input type="file" name="fileInput" id="fileInput" />
//將聲明的普通上傳控制項與Uploadify插件綁定
<script type="text/javascript">
$(document).ready(function() {
$('#fileInput').fileUpload ({
//以下參數均是可選
'uploader' : 'uploader.swf', //指定上傳控制項的主體文件，默認『uploader.swf』
'script' : 'upload.php', //指定伺服器端上傳處理文件，默認『upload.php』
'cancelImg' : 'cancel.png', //指定取消上傳的圖片，默認『cancel.png』
'auto' : true, //選定文件後是否自動上傳，默認false
'folder' : '/uploads' //要上傳到的伺服器路徑，默認『/』
'muti' : true, //是否允許同時上傳多文件，默認false
'fileDesc' : 'rar文件或zip文件' //出現在上傳對話框中的文件類型描述
'fileExt' : '*.rar;*.zip', //控制可上傳文件的擴展名，啟用本項時需同時聲明fileDesc
'sizeLimit': 86400 //控制上傳文件的大小，單位byte
'simUploadLimit' :5 //多文件上傳時，同時上傳文件數目限制
});
});
</script>
上面列出了我認為常用的配置選項，此外還有很多參數可配置，參考官方文檔
通過調用相關功能函數，聲明功能按鈕。
例如聲明上傳功能按鈕(自動上傳時不需要)：
<a href="javascript:$('#fileInput').fileUploadStart();">上傳文件</a>
聲明取消多文件上傳時上傳隊列：
<a href="javascript:$('#fileInput').fileUploadClearQueue();">取消上傳隊列</a>
文章來自中國建站：http://www.jz123.cn/text/2419333.html