jquery上傳,jquery上傳圖片插件

jquery上傳文件是怎么實現(xiàn)的

本篇文章是對Jquery中的LigerUI實現(xiàn)文件上傳的方法，進(jìn)行了分析介紹，需要的朋友可以參考下

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),下陸企業(yè)網(wǎng)站建設(shè),下陸品牌網(wǎng)站建設(shè),網(wǎng)站定制,下陸網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,下陸網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

一、在Head中加入

script src="../lib/js/ajaxfileupload.js" type="text/javascript"/script

script src="../lib/js/ligerui.expand.js" type="text/javascript"/script

二、Html中的Div代碼

復(fù)制代碼 代碼如下:

div id="AppendBill_Div" style="display:none;" %-- 上傳 - 單 --%

table style="height:100%;width:100%"

tr style="height:40px"

td style="width:20%"

圖標(biāo):

/td

tdinput type="file" style="width:200px" id="fileupload" name="fileupload"/

/td

/tr

/table

/div

三、Js中-寫的是關(guān)鍵部分，會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】--

復(fù)制代碼 代碼如下:

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: '添加圖標(biāo)',

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，寫一句關(guān)鍵的，可以返回參數(shù)，前臺提示

string url = Server.MapPath("/Image/" + gfilename + filenameext); // 執(zhí)行上傳操作

怎么樣通過jQuery Ajax實現(xiàn)上傳文件

Query Ajax在web應(yīng)用開發(fā)中很常用，它主要包括有ajax,get,post,load,getscript等等這幾種常用無刷新操作方法，接下來通過本文給大家介紹jquery ajax 上傳文件處理方式。

FormData對象

XMLHttpRequest Level 2添加了一個新的接口FormData.利用FormData對象,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件,我們還可以使用XMLHttpRequest的send()方法來異步的提交這個”表單”.比起普通的ajax,使用FormData的最大優(yōu)點就是我們可以異步上傳一個二進(jìn)制文件.

所有主流瀏覽器的較新版本都已經(jīng)支持這個對象了，比如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也可以支持到的，關(guān)鍵是設(shè)置：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不要去處理發(fā)送的數(shù)據(jù)

processData : false,

// 告訴jQuery不要去設(shè)置Content-Type請求頭

contentType : false,

beforeSend:function(){

console.log("正在進(jìn)行，請稍候");

},

success : function(responseStr) {

if(responseStr.status===0){

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

}else{

console.log("失敗");

}

},

error : function(responseStr) {

console.log("error");

}

});

jQuery實現(xiàn)文件上傳。

/*?jQuery實現(xiàn)文件上傳，參考例子如下：

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;??

//?刪除記錄的同時刪除相應(yīng)文件??

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]))?{??

//?如果該文件夾不存在則創(chuàng)建一個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/";?//?獲取項目根路徑????;??

/*注釋部分對應(yīng)jquery?upload?uploadify插件的后臺代碼,只是還存在編碼問題，默認(rèn)為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;?//真實文件路徑?

//如果該文件夾不存在則創(chuàng)建一個文件夾?

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);//?向頁面端返回結(jié)果信息?

}*/??

//?讀取上傳來的文件信息??

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

}??

//?如果該文件夾不存在則創(chuàng)建一個文件夾??

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;??

}??

}

當(dāng)前名稱：jquery上傳,jquery上傳圖片插件
文章地址：http://muchs.cn/article44/phighe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、電子商務(wù)、網(wǎng)站內(nèi)鏈、品牌網(wǎng)站建設(shè)、商城網(wǎng)站、網(wǎng)站維護(hù)

廣告

聲明：本網(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)