jquery圖片上傳進度條
『壹』 Ajax文件上傳進度條如何實現（jquery版本
前端要做的就是設置一個定時器通過介面去後台獲取當前上傳進度是多少，然後渲染出進度條就行。當進度達到100%時清除定時器。
『貳』 關於js或jquery進度條實現
寫一個div定義寬高，下面鋪一個背景圖片，作為進度條為空的情況。
再在div內部加添加一個img圖片，這個圖片要可以左右延展的。然後用javaScript動態控制圖片的寬度即可，實現進度展現。
『叄』 我需要一個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 多個 上傳文件教程
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或者javascript怎麼實現圓形進度條
你可以看一下這個教程，原理懂了就和做了
網頁鏈接
『陸』 jquery easyUI怎樣實現圖片的上傳
上傳的方法跟一般上傳差不多，只不過提交的時候可以用easyui的form來提交上傳的內容
『柒』 JQuery上傳插件Uploadify裡面有個參數queueID,這個參數是怎麼算出來的
queueID是頁面上容器的id，這個是前端參數，是用來指定進度條出現的位置，比如有個容器
<div
id="tt"></div>
uploadify指定queueID:"tt",那麼文件上傳時進度條會出現在這個容器內。
『捌』 jquery ajax多圖上傳顯示怎麼寫
首先我們在頁面上放置個上傳按鈕，使用POST提交到ajax.php。#ul_pics 用來顯示上傳完畢後的圖片。
<a class="btn" id="btn">上傳圖片</a> 最大500KB，支持jpg，gif，png格式。
<ul id="ul_pics" class="ul_pics clearfix"></ul>
接著，載入jQuery.js和plupload.full.min.js插件。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="plupload/plupload.full.min.js"></script>
當點擊按鈕「上傳圖片」後，彈出選擇文件對話框，按 "ctrl" 選擇多圖片上傳。然後調用 uploader.start() 方法，開始上傳。上傳中間過程我們可以用 UploadProgress 方法來顯示文件進度，最後通過 FileUploaded 來顯示對應的圖片。通過瀏覽器控制台，會發現上傳一張圖片，會向後台ajax.php請求一次。
var uploader = new plupload.Uploader({ //創建實例的構造方法
runtimes: 'html5,flash,silverlight,html4',
//上傳插件初始化選用那種方式的優先順序順序
browse_button: 'btn',
// 上傳按鈕
url: "ajax.php",
//遠程上傳地址
flash_swf_url: 'plupload/Moxie.swf',
//flash文件地址
silverlight_xap_url: 'plupload/Moxie.xap',
//silverlight文件地址
filters: {
max_file_size: '500kb',
//最大上傳文件大小（格式100b, 10kb, 10mb, 1gb）
mime_types: [ //允許文件上傳類型
{
title: "files",
extensions: "jpg,png,gif"
}]
},
multi_selection: true,
//true:ctrl多文件上傳, false 單文件上傳
init: {
FilesAdded: function(up, files) { //文件上傳前
if ($("#ul_pics").children("li").length > 30) {
alert("您上傳的圖片太多了！");
uploader.destroy();
} else {
var li = '';
plupload.each(files,
function(file) { //遍歷文件
li += "<li id='" + file['id'] + "'><div class='progress'><span class='bar'></span><span class='percent'>0%</span></div></li>";
});
$("#ul_pics").append(li);
uploader.start();
}
},
UploadProgress: function(up, file) { //上傳中，顯示進度條
$("#" + file.id).find('.bar').css({
"width": file.percent + "%"
}).find(".percent").text(file.percent + "%");
},
FileUploaded: function(up, file, info) { //文件上傳成功的時候觸發
var data = JSON.parse(info.response);
$("#" + file.id).html("<div class='img'><img src='" + data.pic + "'/></div><p>" + data.name + "</p>");
},
Error: function(up, err) { //上傳出錯的時候觸發
alert(err.message);
}
}
});
uploader.init();
『玖』 jquery Uploadify 上傳完畢進度條一般會自動消失，如何設置上傳完畢之後進度條保留
要看你是哪個版本了，3.1的話，把removeCompleted這個屬性設置為false就可以了，如果是以前的版本呢，就在onComplete這個事件return false
『拾』 jquery file upload怎麼使用
使用方法：
1. 需要載入的js文件：
jquey-1.8.3.min.js
jquery-ui-widget.js
jquery.iframe-transport.js
jquery.fileupload.js
2. html代碼：
?
1
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
3. js代碼：
?
12345678910
$(function () {$('#fileupload').fileupload({dataType: 'json',done: function (e, data) {$.each(data.result.files, function (index, file) {$('<p/>').text(file.name).appendTo(document.body);});}});});
3.1 顯示上傳進度條：
?
123456789
$('#fileupload').fileupload({progressall: function (e, data) {var progress = parseInt(data.loaded / data.total * 100, 10);$('#progress .bar').css('width',progress + '%');}});
3.2 需要一個<div>容器用來顯示進：
?
123
<div id="progress"><div class="bar" style="width: 0%;"></div></div>
4. API
4.1 Initialization：
在上傳按鈕上調用fileupload()方法;
示例：
$('#fileupload').fileupload();
4.2 Options :
1: url：請求發送的目標url
Type: string
Example: '/path/to/upload/handler.json'
2.Type: 文件上傳HTTP請求方式，可以選擇「POST」，「PUT」或者"PATCH",
默認"POST"
Type: string
Example: 'PUT'
3. dataType:希望從伺服器返回的數據類型，默認"json"
Type: string
Example: 'json'
4. autoUpload:默認情況下，只要用戶點擊了開始按鈕被添加至組件的文件會立即上傳。將autoUpload值設為true可以自動上傳。
Type: boolean
Default: true
5. acceptFileTypes：允許上傳的的文件類型
Example: /(\.|\/)(gif|jpe?g|png|xlsx)$/i
6. maxFileSize: 最大上傳文件大小
Example: 999000 (999KB) //單位：B
7. minFileSize:最小上傳文件大小
Example: 100000 (100KB) //單位：B
8.previewMaxWidth : 圖片預覽區域最大寬度
Example: 100 //單位：px
4.3 Callback Options:
使用方法一：函數屬性
實例：
?
123456789101112
$('#fileupload').fileupload({drop: function (e, data) {$.each(data.files, function (index, file) {alert('Dropped file: ' + file.name);});},change: function (e, data) {$.each(data.files, function (index, file) {alert('Selected file: ' + file.name);});}});
使用方法二：綁定事件監聽函數
實例：
?
123
$('#fileupload').bind('fileuploaddrop', function (e, data) {/* ... */}).bind('fileuploadchange', function (e, data) {/* ... */});
每個事件名稱都添加前綴：」fileupload」;
注意推薦使用第二種方法。
常用的回調函數：
1. add: 當文件被添加到上傳組件時被觸發
?
1
$('#fileupload').bind('fileuploadadd', function (e, data) {/* ... */});
或者$('#fileupload').on('fileuploadadd', function (e, data) {/* ... */});
2. processalways: 當一個單獨的文件處理隊列結束（完成或失敗時）觸發
3. progressall: 全局上傳處理事件的回調函數
Example:
?
1234567
$('#fileupload').on('fileuploadprogressall', function (e, data) { //進度條顯示var progress = parseInt(data.loaded / data.total * 100, 10);$('#progress .progress-bar').css('width',progress + '%');});
4. fail : 上傳請求失敗時觸發的回調函數，如果伺服器返回一個帶有error屬性的json響應這個函數將不會被觸發。
5. done : 上傳請求成功時觸發的回調函數，如果伺服器返回一個帶有error屬性的json響應這個函數也會被觸發。
6. always : 上傳請求結束時（成功，錯誤或者中止）都會被觸發。