jqueryfile,jQueryfileupload

jquery file upload怎么使用

使用方法：

创新互联-专业网站定制、快速模板网站建设、高性价比开江网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式开江网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖开江地区。费用合理售后完善，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 显示上传进度条：　

?

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 : 上传请求结束时（成功，错误或者中止）都会被触发。

jquery 获取file有没有选文件

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

你也可以用$("#file").prop('files')获取上传的文件详细信息，判断是否有值

jquery怎么获取file的值

直接利用AJAX是无法传递FILE的....你可以利用一个内部框架.让form的target指向ifame...保证form的action和iframe的src是一样的就可以了...然后在内部框架里处理file.内部框架加载完毕后触发一个函数parent.displayFileTmp("?= $_FILES[file][tmp_name] ?"); 然后让它显示出来就可以了..不要问为什么ajax无法传递file..因为它本身就不支持file的传递

jquery监测file是否改变

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

})

详细请参阅jquery官方文档

jQuery File Upload 图片预览代码如何写

jQuery File Upload是上传文件的一个插件，不一定是图片，所以里面没做预览的支持。但是可以直接用jquery简单实现出来，代码如下：

/*

先在js里扩展一个uploadPreview方法

使用方法: 

div

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

input type="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) {

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页面进行调用：

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

html xmlns="

head

title图片上传预览演示/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图片上传预览演示/h2

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

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

/div

/body

/html