使用jquery上传文件

核心原理

1、点击按钮后讲file存为变量，创建FromData对象，讲file追加到fd里面；

2、发起ajax请求，将fd传送到指定的接口；

3、当服务器回应数据时，使用attr方法修改图片URL，将图片文件显示到页面中；

3、发起ajaxStart事件，监听到ajax请求发起时，显示loading；

3、发起ajaxStop事件，监听到ajax请求结束时，关闭loading；

HTML

JS

一 在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" ><% 上传 单 %><table ><tr ><td >图标: </td><td><input type=file id="fileupload" name=fileupload/></td></tr></table></div>

三 Js中 写的是关键部分 会LigerUI的朋友 你懂得

grid中添加项【存地址字段】 { display: "扫描件" name: "AppendBillPath" width: type: "text" align: "left" } Form可添加项【存地址和d出选择框】

{ name: "AppendBillPath " type: "hidden" } // 上传 【 】 { display: "扫描件" name: "AppendBillPath" boboxName: "AppendBillPath " newline: true labelWidth: width: space: type: "select" options: {}} // 上传 【 】 $ ligerui get("AppendBillPath ") set( onBeforeOpen f_selectAppendBillPath_ ) // 【扫描件】 // 上传 【 】 事件

// #region ======================================= 【上传扫描件窗口】 // 上传 【 】

var AppendBillPathDetail = nullfunction f_selectAppendBillPath_ () { var imageurl = $("#AppendBill") val()var AppendBill_Id = $("#AppendBill") val()// 单号 if (imageurl length == ) { LG showError("您没有输入单号 请输入随单号！")return}

if (AppendBillPathDetail) { AppendBillPathDetail show()

} else {

AppendBillPathDetail = $ ligerDialog open({ target: $("#AppendBill_Div") title: 添加图标 width: height: top: left: // d出窗口大小 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 // 上传 【 】 aspx文件 secureuri: false fileElementId: "fileupload" //Input file id

dataType: "text" success: function (data status) {

// // 保存路径

// $("#AppendBillPath ") val(Data)LG tip(data)f_reload()} error: function (data status e) { LG showError(data)

} })

}

// #endregion 四 后台cs 写一句关键的 可以返回参数 前台提示

lishixinzhi/Article/program/Java/JSP/201311/20623

var

elementIds=["flag"]

//flag为id、name属性名

$.ajaxFileUpload({

url:

'uploadAjax.htm',

type:

'post',

secureuri:

false,

//一般设置为false

fileElementId:

'file',

//

上传文件的id、name属性名

dataType:

'text',

//返回值类型，一般设置为json、application/json

elementIds:

elementIds,

//传递参数到服务器

success:

function(data,

status){

alert(data)

},

error:

function(data,

status,

e){

alert(e)

}

})

---