jq上傳文件進度條
① 如何利用自定義文本框+圖片來實現文件上傳效果
用普通的js有點兒過時了。可以採用jQuery。文件上傳是網站很常見的功能之一，通過使用jQuery可以讓上傳過程更加人性化，更好的用戶體驗。
介紹20個jQuery的文件上傳插件，其中有一些是教程。
1. Plupload
Plupload 是一個Web瀏覽器上的界面友好的文件上傳模塊，可顯示上傳進度、圖像自動縮略和上傳分塊。可同時上傳多個文件。
2. The KillersAjax Upload
該插件使用 XHR 用於上傳多個文件，支持上傳進度顯示，但不支持 IE
3. SWFUpload jQuery Plugin
4. AjaxFileUpload
5. Uploadify
Uploadify簡單說來，是基於Jquery的一款文件上傳插件。它的功能特色總結如下：
支持單文件或多文件上傳，可控制並發上傳的文件數
在伺服器端支持各種語言與之配合使用，諸如PHP,.NET,java……
通過參數可配置上傳文件類型及大小限制
通過參數可配置是否選擇文件後自動上傳
易於擴展，可控制每一步驟的回調函數（onSelect, onCancel……）
通過介面參數和CSS控制外觀
6. jQuery Multiple File Upload Plugin
7. jqUploader
jqUploader 是實現文件上傳的jQuery插件
8. jQuery Form Plugin
jQuery Form Plugin 是一個擴展表單操作的 jQuery 插件，直接文件上傳表單
9. jQuery Form Plugin
10. jqswfupload
11. uploadprogress
12. jQuery File Upload
13. Multiple File Upload With Progress Bar Using jQuery
14. jQuery.upload
一個簡單的 Ajax 文件上傳插件
15. Ajax File Upload Script Using jQuery
jQuery File Uploader 使用 iframe 來處理上傳過程
16. jQuery Custom File Upload Input
17. Image Upload and Cropping with PHP and Jquery
18. PHP & jQuery image upload and crop
19. AJAX upload progress bars with jQuery, Django and nginx
20. Uploading Files with AJAX
21. AJAX Multiple File Upload Form Using jQuery
22. FancyUpload – Swiff meets Ajax (v3.0)
FancyUpload是一個採用Flash與Ajax（MooTools）技術實現包含上傳進度條的多文件上傳組件，類似於SWFUpload。MooTools是一個與prototype相類似的一個Ajax框架。
去網路，搜索這裡面的名稱，就能找到了。 非常強大。
② jQuery Ajax進度條效果
其實這種效果在實際應用中並不是太實用，如果你需要有一個進度的話，這必然前台與後台要實時交互才會出效果。比如你從資料庫中遍歷一組用戶的信息，這中間需要一個不斷遞增的數字來實時調節頁面的進度條。這就需要你不斷的去請求伺服器。當然也可以做個純頁面處理不通過伺服器的，但執行時間你無法估計，造成不同步。
有一個簡單的方法，首先得到這個需要讀取數據的總條目數，然後在前台頁面使用一個類似於遞歸的循環調用這個AJAX方法，再通過返回的數據來實時控制頁面的進度條，通過返回成功的狀態重復來調用此方法，最後用總條目數來控制這個遞歸什麼時候停止。
③ django文件上傳的時候怎麼能加一個上傳進度的顯示
首先需要一個表單來讓用戶選擇要上傳的文件。
1 <form id="form_upload" action="/upload" method="POST">
2 <input type="file" name="picture" id="picture" />
3 <input type="hidden" id="X-Progress-ID" name="X-Progress-ID" value=""/>
4 <input type="hidden" id="id" name="id" value=""/>
5 <input id="form_submit_button" class="tp-button" type="submit" value="Submit" />
6 </form>
這里增加了兩個隱藏的輸入框，第一個是 『X-Progress-ID』，代表上傳 ID，這樣我們才能夠在伺服器端支持並發的上傳請求。稍後我們會看到，伺服器是如何處理這個值的。
然後還有一個隱藏輸入框 『id』，在我們的例子里代表菜品的編號。
我們將使用 Ajax 來發送 POST 請求，這樣表單便可以很好地集成在現代的網路界面中，同時包含一個進度條。我們打算使用 jQuery Form plugin 來實現這一點。
函數 ajaxSubmit() 將會幫我們搞定一切。
為上傳 ID 生成一個隨機字串，並用它設置輸入框的值。
需要指定一個用於上傳請求的 URL 和兩個回調函數：一個在請求前調用，另一個在請求完成後調用。
1 $('#X-Progress-ID').val('random string');
2 var options = {
3 dataType: 'xml',
4 url: '/upload?X-Progress-ID='+$('#X-Progress-ID').val(),
5 beforeSubmit: showRequest,
6 success: showResponse
7 }
8 $('#form_upload').ajaxSubmit(options);
showRequest 回調函數只需要像下面這么簡單就行了：
1 function showRequest(formData, jqForm, options) {
2 // do something with formData
3 return True;
4 }
在 showResponse 函數中，我們需要處理響應，並對它進行操作。在我的例子里，我處理了伺服器返回的帶有狀態值的 xml。
1 function showResponse(response) {
2 // do something with response
3 }
用戶按下提交的時候，我們希望顯示一個進度條，因此可以使用下面的 JS 代碼，向表單添加進度條。progressBar() 方法是 jQuery progress bar plugin 的一部分。
1 $('#form_upload').find('#form_submit_input').append('<span id="uploadprogressbar"></span<');
2 $('#form_upload').find('#uploadprogressbar').progressBar();
現在我們需要添加一個每隔幾秒運行一次的函數，來從伺服器獲取上傳進度，並相應地更新進度條。
為此，我們使用 setInterval() 向伺服器發出一個 GET 請求，獲取 JSON 格式的進度值。我們向伺服器傳送上傳 ID。當返回 null 值的時候，就可以知道上傳已經結束。
01 function startProgressBarUpdate(upload_id) {
02 $("#uploadprogressbar").fadeIn();
03 if(g_progress_intv != 0)
04 clearInterval(g_progress_intv);
05 g_progress_intv = setInterval(function() {
06 $.getJSON("/get_upload_progress?X-Progress-ID="
07 + upload_id, function(data) {
08 if (data == null) {
09 $("#uploadprogressbar").progressBar(100);
10 clearInterval(g_progress_intv);
11 g_progress_intv = 0;
12 return;
13 }
14 var percentage = Math.floor(100 * parseInt(data.uploaded) / parseInt(data.length));
15 $("#uploadprogressbar").progressBar(percentage);
16 });
④ jquery Uploadify 上傳完畢進度條一般會自動消失，如何設置上傳完畢之後進度條保留
要看你是哪個版本了，3.1的話，把removeCompleted這個屬性設置為false就可以了，如果是以前的版本呢，就在onComplete這個事件return false
⑤ Ajax文件上傳進度條如何實現（jquery版本
前端要做的就是設置一個定時器通過介面去後台獲取當前上傳進度是多少，然後渲染出進度條就行。當進度達到100%時清除定時器。
⑥ 關於js或jquery進度條實現
寫一個div定義寬高，下面鋪一個背景圖片，作為進度條為空的情況。
再在div內部加添加一個img圖片，這個圖片要可以左右延展的。然後用JavaScript動態控制圖片的寬度即可，實現進度展現。
⑦ 用jquery如何實現提交表單點擊提交之後顯示正在上傳中，之後顯示上傳成功的效果
需要准備的材料分別有：電腦、html編輯器、瀏覽器。
1、首先，打開html編輯器，新建html文件，例如：index.html，並引入jquery。
⑧ 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" 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>
</div>
三、Js中-寫的是關鍵部分，會LigerUI的朋友-你懂得
1、grid中添加項【存地址欄位】
{ display: "掃描件", name: "AppendBillPath", width: 120, type: "text", align: "left" }
2、Form可添加項【存地址和彈出選擇框】
{ name: "AppendBillPath1", type: "hidden" }, // --上傳-【5】--
{ display: "掃描件", name: "AppendBillPath", comboboxName: "AppendBillPath2", newline: true, labelWidth: 100, width: 150, space: 30, type: "select", options: {}} // --上傳-【6】--
$.ligerui.get("AppendBillPath2").set('onBeforeOpen', f_selectAppendBillPath_1) // 【掃描件】 // --上傳-【7】--
3、事件
// #region ======================================= 【上傳掃描件窗口】 // --上傳-【8】--
復制代碼 代碼如下:
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(); } }
]
});
}
}
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, // --上傳-【9】-- aspx文件
secureuri: false,
fileElementId: "fileupload", //Input file id
dataType: "text",
success: function (data, status)
{
// ----------------- // 保存路徑
// $("#AppendBillPath2").val(Data);
LG.tip(data);
f_reload();
},
error: function (data, status, e) {
LG.showError(data);
}
});
}
// #endregion
四、後台cs，寫一句關鍵的，可以返回參數，前台提示
string url = Server.MapPath("/Image/" + gfilename + filenameext); // 執行上傳操作
⑨ java 做進度條 ajax實現 js jquery ext 都可以需要具體實現過程和代碼 需要讀取數據
這個好像做不到，現在一般有的效果就是上傳文件時的進度條。
像你說得讀取數據之類還沒遇見過，一般也只是加個循環轉動的圖片等待而已，不能做到實時。
⑩ 用jquery實現進度條效果
二樓的方法不是常規的解決辦法，個人感覺不是很好(不過他實現的載入進度是真實的，他的進度條是可以反映當前未載入頁面的剩餘內容的---其實這種方法也挺好....不過一般情況下沒什麼必要吧，如果要做成這樣的，用flex更好)。
一樓的方法不是正確的。如果簡單地放一個loading圖片在頁面上的話，會有兩種情況：一、有可能實現載入的效果 。 二、在整個頁面其它元素載入了大部分或全部後，這張圖片才載入進來，那就實現不了載入的效果了。
常規的解決辦法還是用ajax比較好。大概是這樣的。
需要兩個頁面。1.一個是實際頁面本身 2.另一個是一個空白頁面放一張loading圖片
先請求第2個頁面，在這個頁面中放一段ajax請求第1個頁面，在success函數里將頁面內容輸出，並將loading圖片隱藏掉。
代碼是這樣的：
loading page:
<body>
<img id='loadingImg' src='loading.gif' />
<body>
<script>
$.ajax({
type: 'GET',
url: 實際頁面路徑,
data: {},
success: function(){
$('body').append(data);
$('#loadingImg').hide();//或直接remove()
},
dataType: 'html'
});
</script>
==========================================================
呵呵，一個載入的問題要考慮搜索的話原來就這么麻煩了。 <div id="forspider">.....給搜索蜘蛛看的純HTML....</div>這裡面的內容是整個實際頁面的HTML嗎？是的話，那這個loading頁面本身載入就很笨重了，還不如直接跳到真實頁面呢。 哎，可惜我不太懂搜索，悲劇。請指教----為什麼要用絕對定位覆蓋的方法來隱藏。直接把這一層display:none的話蜘蛛也會看不到嗎？
以上回答你滿意么？