Ⅰ 想用jquery ui組件做一個文件上傳的功能，但是其中涉及到的是跨域的問題，腫么辦
不用jquery-ui,引入jquery後,再引入TableSort插件即可,使用非常簡單.
Ⅱ jquery上傳控制項uploadify有沒有辦法控制多文件上傳時的上傳順序
猛的一下沒看太懂你的意思， jquery uploadify可以限制文件上傳的個數，文件的大小，但對寬高沒有限制，你需要自己去設置判斷；如果是圖片的話
Ⅲ 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以下/。
Ⅳ jquery uploadify 上傳控制項 上傳多個文件（4個以上）或者上傳大文件的時候為什麼會報http錯誤，高手進。。
這里有一個無刷新多文件上傳系統
裡面可以判斷文件多少 文件類型
裡面有教程和源碼
Ⅳ 使用jquery的uploadify，無法顯示文件上傳控制項，請幫忙看是什麼原因
<divid="fileQueue"></div>你加上這個
<p>
<inputtype="file"id="uploadify"name="uploadify"/>
</p>
用火狐的話，那個Browse的好像顯示不出來。
你能不能貼張圖。
Ⅵ DWZ中怎樣整合JQuery的ajaxFileUpload上傳插件
jQuery插件AjaxFileUpload可以實現ajax文件上傳，需要jQuery庫文件和ajaxfileupload.js
一.引入部分
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajaxfileupload.js"></script>
二.<body>部分
<img src="images/nophoto.jpg" id="picture" width="160px" height="200px"/>
<input type="file" id="touxiang" name="photo" size="10" onchange="changImg()"/>
注意：使用AjaxFileUpload插件上傳文件可不需要form
<form name="form" action="" method="POST" enctype="multipart/form-data">
……相關html代碼……
</form>
三.js部分
function changImg(){
$.ajaxFileUpload
(
{
url:'XXX.action', //上傳文件的服務端
secureuri:false, //是否啟用安全提交
dataType: 'text', //數據類型
fileElementId:'touxiang', //表示文件域ID
//提交成功後處理函數 html為返回值，status為執行的狀態
success: function(html,status)
{
},
//提交失敗處理函數
error: function (html,status,e)
{
}
}
)
}
四.原理
利用jQuery的選擇器獲得file文件上傳框中的文件路徑值，然後動態的創建一個iframe，並在裡面建立一個新的file 文件框，提供post方式提交到後台。最後，返回結果到前台。
五.總結
使用jQuery插件AjaxFileUpload實現無刷新上傳文件非常實用，由於其簡單易用，因些這個插件相比其它文件上傳插件使用人數最多，非常值得推薦。
Ⅶ 有哪些好用的 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 Ajax實現上傳文件
Query Ajax在web應用開發中很常用，它主要包括有ajax,get,post,load,getscript等等這幾種常用無刷新操作方法，接下來通過本文給大家介紹jquery ajax 上傳文件處理方式。
FormData對象
XMLHttpRequest Level 2添加了一個新的介面FormData.利用FormData對象,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控制項,我們還可以使用XMLHttpRequest的send()方法來非同步的提交這個」表單」.比起普通的ajax,使用FormData的最大優點就是我們可以非同步上傳一個二進制文件.
所有主流瀏覽器的較新版本都已經支持這個對象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。之前都是用原生js的XMLHttpRequest寫的請求
XMLHttpRequest方式
xhr.open("POST", uri, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// Handle response.
alert(xhr.responseText); // handle response.
}
};
fd.append('myFile', file);
// Initiate a multipart/form-data upload
xhr.send(fd);
其實jquery的ajax也可以支持到的，關鍵是設置：processData 和 contentType 。
ajax方式
var formData = new FormData();
var name = $("input").val();
formData.append("file",$("#upload")[0].files[0]);
formData.append("name",name);
$.ajax({
url : Url,
type : 'POST',
data : formData,
// 告訴jQuery不要去處理發送的數據
processData : false,
// 告訴jQuery不要去設置Content-Type請求頭
contentType : false,
beforeSend:function(){
console.log("正在進行，請稍候");
},
success : function(responseStr) {
if(responseStr.status===0){
console.log("成功"+responseStr);
}else{
console.log("失敗");
}
},
error : function(responseStr) {
console.log("error");
}
});
Ⅸ 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.'"}';
}
}
}
Ⅹ 請問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