jquery file upload怎么使用

使用方法：

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比開江網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式開江網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋開江地區(qū)。費用合理售后完善，10年實體公司更值得信賴。

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 顯示上傳進(jìn)度條：　

?

123456789

$('#fileupload').fileupload({　progressall: function (e, data) {　var progress = parseInt(data.loaded / data.total * 100, 10);　$('#progress .bar').css(　'width',　progress + '%'　);　}　});

3.2 需要一個div容器用來顯示進(jìn)：

?

123

div id="progress"　div class="bar" style="width: 0%;"/div　/div

4. API

4.1 Initialization：

在上傳按鈕上調(diào)用fileupload()方法;

示例：

$('#fileupload').fileupload();

4.2 Options :

1: url：請求發(fā)送的目標(biāo)url

Type: string

Example: '/path/to/upload/handler.json'

2.Type: 文件上傳HTTP請求方式，可以選擇“POST”，“PUT”或者"PATCH",

默認(rèn)"POST"

Type: string

Example: 'PUT'

3. dataType:希望從服務(wù)器返回的數(shù)據(jù)類型，默認(rèn)"json"

Type: string

Example: 'json'

4. autoUpload:默認(rèn)情況下，只要用戶點擊了開始按鈕被添加至組件的文件會立即上傳。將autoUpload值設(shè)為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 : 圖片預(yù)覽區(qū)域最大寬度

Example: 100 //單位：px

4.3 Callback Options:

使用方法一：函數(shù)屬性

實例：

?

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);});}});

使用方法二：綁定事件監(jiān)聽函數(shù)

實例：

?

123

$('#fileupload').bind('fileuploaddrop', function (e, data) {/* ... */}).bind('fileuploadchange', function (e, data) {/* ... */});

每個事件名稱都添加前綴：”fileupload”;

注意推薦使用第二種方法。

常用的回調(diào)函數(shù)：

1. add: 當(dāng)文件被添加到上傳組件時被觸發(fā)

?

1

$('#fileupload').bind('fileuploadadd', function (e, data) {/* ... */});

或者$('#fileupload').on('fileuploadadd', function (e, data) {/* ... */});

2. processalways: 當(dāng)一個單獨的文件處理隊列結(jié)束（完成或失敗時）觸發(fā)

3. progressall: 全局上傳處理事件的回調(diào)函數(shù)

Example:

?

1234567

$('#fileupload').on('fileuploadprogressall', function (e, data) { //進(jìn)度條顯示var progress = parseInt(data.loaded / data.total * 100, 10);$('#progress .progress-bar').css('width',progress + '%');});

4. fail : 上傳請求失敗時觸發(fā)的回調(diào)函數(shù)，如果服務(wù)器返回一個帶有error屬性的json響應(yīng)這個函數(shù)將不會被觸發(fā)。

5. done : 上傳請求成功時觸發(fā)的回調(diào)函數(shù)，如果服務(wù)器返回一個帶有error屬性的json響應(yīng)這個函數(shù)也會被觸發(fā)。

6. always : 上傳請求結(jié)束時（成功，錯誤或者中止）都會被觸發(fā)。

jquery 獲取file有沒有選文件

你直接用$("#file").val();判斷值是否為空就行。

你也可以用$("#file").prop('files')獲取上傳的文件詳細(xì)信息，判斷是否有值

jquery怎么獲取file的值

直接利用AJAX是無法傳遞FILE的....你可以利用一個內(nèi)部框架.讓form的target指向ifame...保證form的action和iframe的src是一樣的就可以了...然后在內(nèi)部框架里處理file.內(nèi)部框架加載完畢后觸發(fā)一個函數(shù)parent.displayFileTmp("?= $_FILES[file][tmp_name] ?"); 然后讓它顯示出來就可以了..不要問為什么ajax無法傳遞file..因為它本身就不支持file的傳遞

jquery監(jiān)測file是否改變

$("body").on("change","#fileFiled",function(){

})

詳細(xì)請參閱jquery官方文檔

jQuery File Upload 圖片預(yù)覽代碼如何寫

jQuery File Upload是上傳文件的一個插件，不一定是圖片，所以里面沒做預(yù)覽的支持。但是可以直接用jquery簡單實現(xiàn)出來，代碼如下：

/*

先在js里擴展一個uploadPreview方法

使用方法:?

div

img?id="ImgPr"?width="120"?height="120"?//div

input?type="file"?id="up"?/

把需要進(jìn)行預(yù)覽的IMG標(biāo)簽外?套一個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)?{

var?url?=?null;

if?(window.createObjectURL?!=?undefined)?{

url?=?window.createObjectURL(file)

}?else?if?(window.URL?!=?undefined)?{

url?=?window.URL.createObjectURL(file)

}?else?if?(window.webkitURL?!=?undefined)?{

url?=?window.webkitURL.createObjectURL(file)

}

return?url

};

_this.change(function?()?{

if?(this.value)?{

if?(!RegExp("\.("?+?opts.ImgType.join("|")?+?")$",?"i").test(this.value.toLowerCase()))?{

alert("選擇文件錯誤,圖片類型必須是"?+?opts.ImgType.join("，")?+?"中的一種");

this.value?=?"";

return?false

}

if?($.browser.msie)?{

try?{

$("#"?+?opts.Img).attr('src',?_self.getObjectURL(this.files[0]))

}?catch?(e)?{

var?src?=?"";

var?obj?=?$("#"?+?opts.Img);

var?div?=?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頁面進(jìn)行調(diào)用：

!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"

html?xmlns="

head

title圖片上傳預(yù)覽演示/title

script?src="jquery.min.js"?type="text/javascript"/script

script?src="16/uploadPreview.js"?type="text/javascript"/script

script

$(function?()?{

$("#up").uploadPreview({?Img:?"ImgPr",?Width:?120,?Height:?120?});

});

/script

/head

body

div?style="width:500px;margin:0px?auto;"h2圖片上傳預(yù)覽演示/h2

divimg?id="ImgPr"?width="120"?height="120"?//div

input?type="file"?id="up"?/

/div

/body

/html

網(wǎng)站欄目：jqueryfile,jQueryfileupload
當(dāng)前地址：http://chinadenli.net/article3/dsggeis.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、品牌網(wǎng)站制作、搜索引擎優(yōu)化、自適應(yīng)網(wǎng)站、建站公司、用戶體驗

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)