jquery文件上傳插件
1. 如何利用自定義文本框+圖片來實現文件上傳效果
用普通的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框架。
去網路，搜索這裡面的名稱，就能找到了。 非常強大。
2. 請問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
3. jQuery File Upload 圖片預覽代碼如何寫
jQuery File Upload是上傳文件的一個插件，不一定是圖片，所以裡面沒做預覽的支持。但是可以直接用jquery簡單實現出來，代碼如下：
/*
先在js里擴展一個uploadPreview方法
使用方法:
<div>
<imgid="ImgPr"width="120"height="120"/></div>
<inputtype="file"id="up"/>
把需要進行預覽的IMG標簽外套一個DIV然後給上傳控制項ID給予uploadPreview事件
$("#up").uploadPreview({Img:"ImgPr",Width:120,Height:120,ImgType:["gif","jpeg","jpg","bmp","png"],Callback:function(){}});
*/
jQuery.fn.extend({
uploadPreview:function(opts){
var_self=this,
_this=$(this);
opts=jQuery.extend({
Img:"ImgPr",
Width:100,
Height:100,
ImgType:["gif","jpeg","jpg","bmp","png"],
Callback:function(){}
},opts||{});
_self.getObjectURL=function(file){
varurl=null;
if(window.createObjectURL!=undefined){
url=window.createObjectURL(file)
}elseif(window.URL!=undefined){
url=window.URL.createObjectURL(file)
}elseif(window.webkitURL!=undefined){
url=window.webkitURL.createObjectURL(file)
}
returnurl
};
_this.change(function(){
if(this.value){
if(!RegExp(".("+opts.ImgType.join("|")+")$","i").test(this.value.toLowerCase())){
alert("選擇文件錯誤,圖片類型必須是"+opts.ImgType.join("，")+"中的一種");
this.value="";
returnfalse
}
if($.browser.msie){
try{
$("#"+opts.Img).attr('src',_self.getObjectURL(this.files[0]))
}catch(e){
varsrc="";
varobj=$("#"+opts.Img);
vardiv=obj.parent("div")[0];
_self.select();
if(top!=self){
window.parent.document.body.focus()
}else{
_self.blur()
}
src=document.selection.createRange().text;
document.selection.empty();
obj.hide();
obj.parent("div").css({
'filter':'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',
'width':opts.Width+'px',
'height':opts.Height+'px'
});
div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=src
}
}else{
$("#"+opts.Img).attr('src',_self.getObjectURL(this.files[0]))
}
opts.Callback()
}
})
}
});
然後是HTML頁面進行調用：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""
<htmlxmlns="
<head>
<title>圖片上傳預覽演示</title>
<scriptsrc="jquery.min.js"type="text/javascript"></script>
<scriptsrc="16/uploadPreview.js"type="text/javascript"></script>
<script>
$(function(){
$("#up").uploadPreview({Img:"ImgPr",Width:120,Height:120});
});
</script>
</head>
<body>
<divstyle="width:500px;margin:0pxauto;"><h2>圖片上傳預覽演示</h2>
<div><imgid="ImgPr"width="120"height="120"/></div>
<inputtype="file"id="up"/>
</div>
</body>
</html>
4. jquery.fileUpload.js文件上傳問題
了解，fileuploader方法需要先初始化，然後才能觸發上傳，並不需要你手動觸發change事件
你只需
html
<form>
file:<inputtype="file"id="file"name="file">
</form>
js
$('#file').on('change',function(){
//這里可以做校驗，返回false就不會觸發下面的上傳插件，否則就會觸發上傳
if(!this.value||this.value.indexOf('.jpg')==-1){
returnfalse;
}
});
//初始化上傳插件
$('#file').fileupload({
autoUpload:true,//這里為true，則選中文件後就會自動上傳
url:'',
done:$.noop,
fail:$.noop
});
5. jquery的post方法上傳文件問題。
用jQuery 的Ajax文件上傳的組件：ajaxfileupload.js
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajaxfileupload.js"></script>
<script type="text/javascript">
function ajaxFileUpload()
{
$.ajaxFileUpload
(
{
url:'doajaxfileupload.php', //你處理上傳文件的服務端
secureuri:false,
fileElementId:'img',
dataType: 'json',
success: function (data)
{
alert(data.file_infor);
}
}
)
return false;
}
</script>
<input id="img" type="file" size="45" name="img" class="input">
<button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button>
6. 使用jquery.form.js實現文件上傳及進度條前端代碼
ajax的表單提交只能提交data數據到後台，沒法實現file文件的上傳還有展示進度功能，這里用到form.js的插件來實現，搭配css樣式簡單易上手，而且高大上，推薦使用。
需要解釋下我的結構， #upload-input-file 的input標簽是真實的文件上傳按鈕，包裹form標簽後可以實現上傳功能， #upload-input-btn 的button標簽是展示給用戶的按鈕，因為需要樣式的美化。上傳完成生成的文件名將會顯示在 .upload-file-result 裡面， .progress 是進度條的位置，先讓他隱藏加上 hidden 的class， .progress-bar 是進度條的主體， .progress-bar-status 是進度條的文本提醒。
去掉hidden的class，看到的效果是這樣的
[圖片上傳失敗...(image-2c700a-1548557865446)]
將上傳事件綁定在file的input裡面，綁定方式就隨意了。
var progress = $(".progress-bar"), status = $(".progress-bar-status"), percentVal = '0%'; //上傳步驟 $("#myupload").ajaxSubmit({ url: uploadUrl, type: "POST", dataType: 'json', beforeSend: function () { $(".progress").removeClass("hidden"); progress.width(percentVal); status.html(percentVal); }, uploadProgress: function (event, position, total, percentComplete) { percentVal = percentComplete + '%'; progress.width(percentVal); status.html(percentVal); console.log(percentVal, position, total); }, success: function (result) { percentVal = '100%'; progress.width(percentVal); status.html(percentVal); //獲取上傳文件信息 uploadFileResult.push(result); // console.log(uploadFileResult); $(".upload-file-result").html(result.name); $("#upload-input-file").val(''); }, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(errorThrown); $(".upload-file-result").empty(); } });
[圖片上傳失敗...(image-3d6ae0-1548557865446)]
[圖片上傳失敗...(image-9f0adf-1548557865446)]
更多用法可以 參考官網