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

tdinput 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); // 执行上传操作

怎么样通过jQuery Ajax实现上传文件

Query Ajax在web应用开发中很常用，它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法，接下来通过本文给大家介绍jquery ajax 上传文件处理方式。

FormData对象

XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个”表单”.比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.

所有主流浏览器的较新版本都已经支持这个对象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。之前都是用原生js的XMLHttpRequest写的请求

XMLHttpRequest方式

xhr.open("POST", uri, true);

xhr.onreadystatechange = function() {

if (xhr.readyState == 4 xhr.status == 200) {

// Handle response.

alert(xhr.responseText); // handle response.

}

};

fd.append('myFile', file);

// Initiate a multipart/form-data upload

xhr.send(fd);

其实jquery的ajax也可以支持到的，关键是设置：processData 和 contentType 。

ajax方式

var formData = new FormData();

var name = $("input").val();

formData.append("file",$("#upload")[0].files[0]);

formData.append("name",name);

$.ajax({

url : Url,

type : 'POST',

data : formData,

// 告诉jQuery不要去处理发送的数据

processData : false,

// 告诉jQuery不要去设置Content-Type请求头

contentType : false,

beforeSend:function(){

console.log("正在进行，请稍候");

},

success : function(responseStr) {

if(responseStr.status===0){

console.log("成功"+responseStr);

}else{

console.log("失败");

}

},

error : function(responseStr) {

console.log("error");

}

});

jQuery实现文件上传。

/* jQuery实现文件上传，参考例子如下：

package com.kinth.hddpt.file.action;  

import java.io.File;  

import java.io.FileNotFoundException;  

import java.io.FileOutputStream;  

import java.io.IOException;  

import java.io.InputStream;  

import java.io.OutputStream;  

import java.util.ArrayList;  

import java.util.Calendar;  

import java.util.Enumeration;  

import java.util.Hashtable;  

import java.util.List;  

import javax.servlet.http.HttpServletRequest;  

import javax.servlet.http.HttpServletResponse;  

import net.sf.json.JSONArray;  

import org.apache.commons.logging.Log;  

import org.apache.commons.logging.LogFactory;  

import org.apache.struts.action.ActionForm;  

import org.apache.struts.action.ActionForward;  

import org.apache.struts.action.ActionMapping;  

import org.apache.struts.upload.FormFile;  

import org.hibernate.criterion.MatchMode;  

import org.hibernate.criterion.Order;  

import org.hibernate.criterion.Restrictions;  

import com.gdcn.bpaf.common.base.search.MyCriteria;  

import com.gdcn.bpaf.common.base.search.MyCriteriaFactory;  

import com.gdcn.bpaf.common.base.service.BaseService;  

import com.gdcn.bpaf.common.helper.PagerList;  

import com.gdcn.bpaf.common.helper.WebHelper;  

import com.gdcn.bpaf.common.taglib.SplitPage;  

import com.gdcn.bpaf.security.model.LogonVO;  

import com.gdcn.components.appauth.common.helper.DictionaryHelper;  

import com.kinth.common.base.action.BaseAction;  

import com.kinth.hddpt.file.action.form.FileCatalogForm;  

import com.kinth.hddpt.file.model.FileCatalog;  

import com.kinth.hddpt.file.service.FileCatalogService;  

import com.kinth.hddpt.file.util.MyZTreeNode;  

/** 

* p 

* description: “文件上传的Struts层请求处理类” 

* /p 

* @date : 2013-1-14 

*/  

public class FileCatalogAction extends BaseActionFileCatalog {  

@SuppressWarnings("unused")  

private static Log log = LogFactory.getLog(FileCatalogAction.class); // 日志记录  

private FileCatalogService fileCatalogService;  

// 删除记录的同时删除相应文件  

public ActionForward fileDelete(ActionMapping mapping, ActionForm form,  

HttpServletRequest request, HttpServletResponse response)  

throws Exception {  

String[] id = request.getParameterValues("resourceId");  

if (id != null  id[0].contains(",")) {  

id = id[0].split(",");  

}  

String[] fileUrls = new String[id.length];  

for (int j = 0; j  id.length; j++) {  

fileUrls[j] = fileCatalogService.findObject(id[j]).getFileUrl();  

if (!isEmpty(fileUrls[j])) {  

// 如果该文件夹不存在则创建一个uptext文件夹  

File fileup = new File(fileUrls[j]);  

if (fileup.exists() || fileup != null) {  

fileup.delete();  

}  

}  

fileCatalogService.deleteObject(id[j]);  

}  

setAllActionInfos(request);  

return list(mapping, form, request, response);  

}  

@Override  

public ActionForward save(ActionMapping mapping, ActionForm form,  

HttpServletRequest request, HttpServletResponse response)  

throws Exception {  

String id = request.getParameter("resourceId");   

Boolean fileFlag = Boolean.valueOf(request.getParameter("fileFlag"));  

if(fileFlag != null  fileFlag == true){  

return super.save(mapping, form, request, response);  

}else{  

String fileUrl = this.fileUpload(form, request, id, fileFlag);  

response.setContentType("text/html");  

response.setCharacterEncoding("GBK");  

response.setHeader("Charset", "GBK");  

response.setHeader("Cache-Control", "no-cache");  

response.getWriter().write(fileUrl);  

response.getWriter().flush();  

}  

return null;  

}  

@SuppressWarnings("unchecked")  

public String fileUpload(ActionForm form,HttpServletRequest request,String id,Boolean fileFlag) throws FileNotFoundException, IOException{  

request.setCharacterEncoding("GBK");  

String basePath = getServlet().getServletConfig().getServletContext().getRealPath("")+"/";  

String filePath = "uploads/"; // 获取项目根路径    ;  

/*注释部分对应jquery upload uploadify插件的后台代码,只是还存在编码问题，默认为utf-8 

String savePath = getServlet().getServletConfig().getServletContext().getRealPath(""); // 获取项目根路径 

savePath = savePath + "\\uploads\\"; 

//读取上传来的文件信息 

HashtableString, FormFile fileHashtable = form.getMultipartRequestHandler().getFileElements(); 

EnumerationString enumeration = fileHashtable.keys(); 

enumeration.hasMoreElements(); 

String key = (String) enumeration.nextElement(); 

FormFile formFile = (FormFile)fileHashtable.get(key); 

String filename = formFile.getFileName().trim(); //文件名 

filename = new EncodeChange().changeCode(filename); 

String filetype = filename.substring(filename.lastIndexOf(".") + 1);//文件类型 

savePath = savePath+filetype+"\\"; 

System.out.println("path:"+savePath); 

String realPath = savePath +  filename; //真实文件路径 

//如果该文件夹不存在则创建一个文件夹 

File fileup = new File(savePath); 

if(!fileup.exists()||fileup==null){ 

fileup.mkdirs(); 

} 

if (!filename.equals("")) { 

// 在这里上传文件 

InputStream is = formFile.getInputStream(); 

OutputStream os = new FileOutputStream(realPath); 

int bytesRead = 0; 

byte[] buffer = new byte[8192]; 

while ((bytesRead = is.read(buffer, 0, 8192)) != -1) { 

os.write(buffer, 0, bytesRead); 

} 

os.close(); 

is.close(); 

//如果是修改操作，则删除原来的文件 

String id = request.getParameter("resourceId"); 

if (!isEmpty(id)) { 

FileCatalog fileCatalog = fileCatalogService.findObject(id); 

String fileUrl = fileCatalog.getFileUrl(); 

if (!isEmpty(fileUrl)) { 

File filedel = new File(fileUrl); 

if(filedel.exists()||filedel!=null){ 

filedel.delete(); 

} 

} 

request.setAttribute("entity", fileCatalog); 

} 

response.getWriter().print(realPath);// 向页面端返回结果信息 

}*/  

// 读取上传来的文件信息  

HashtableString, FormFile fileHashtable = form.getMultipartRequestHandler().getFileElements();  

EnumerationString enumeration = fileHashtable.keys();  

enumeration.hasMoreElements();  

String key = (String) enumeration.nextElement();  

FormFile formFile = (FormFile) fileHashtable.get(key);  

String filename = formFile.getFileName().trim(); // 文件名  

String filetype = filename.substring(filename.lastIndexOf(".") + 1);// 文件类型       

Integer fileSize = formFile.getFileSize();  

filePath += Calendar.getInstance().get(Calendar.YEAR)+"/"+filetype+"/" ;  

String realPath = basePath+filePath+filename;  // 真实文件路径  

if (!filename.equals("")) {  

// 如果是修改操作，则删除原来的文件  

if (!isEmpty(id)) {  

FileCatalog fileCatalog = fileCatalogService.findObject(id);  

String fileUrl = fileCatalog.getFileUrl();  

if (!isEmpty(fileUrl)) {  

fileUrl = basePath + fileUrl;  

File filedel = new File(fileUrl);  

if (filedel.exists() || filedel != null) {  

filedel.delete();  

}  

}  

request.setAttribute("entity", fileCatalog);  

}  

// 如果该文件夹不存在则创建一个文件夹  

File fileup = new File(basePath+filePath);  

if (!fileup.exists() || fileup == null) {  

fileup.mkdirs();  

}  

// 在这里上传文件  

InputStream is = formFile.getInputStream();  

OutputStream os = new FileOutputStream(realPath);  

int bytesRead = 0;  

byte[] buffer = new byte[8192];  

while ((bytesRead = is.read(buffer, 0, 8192)) != -1) {  

os.write(buffer, 0, bytesRead);  

}  

os.close();  

is.close();  

}  

filePath += filename;  

String result = "{\"fileName\":\""+filename+"\",\"fileType\":\""+filetype+"\",\"fileSize\":"+fileSize+",\"fileUrl\":\""+filePath+"\"}";           

return result;  

}  

public FileCatalogService getFileCatalogService() {  

return fileCatalogService;  

}  

public void setFileCatalogService(FileCatalogService fileCatalogService) {  

this.fileCatalogService = fileCatalogService;  

}  

}