jquery上傳插件,jq文件上傳插件
jquery 上傳文件插件uploadify jsp版本
1、下載最新的zip壓縮包
專注于為中小企業(yè)提供成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)荊門免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上1000家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
2、從其中提取文件。
下載插件安裝包后，可以看到官方給出的例子。里面文件夾的幾個(gè)主要文件：jquery.uploadify.js(完成上傳功能的腳本文件，在調(diào)用頁面引
用)、uploadify.css(外觀樣式表)、uploader.swf(上傳控件的主體文件，flash控件)、upload.php(服務(wù)器端處
理文件，官方僅提供了php版的)。
下面我使用的是在MyEclipse部署的java版。注意：需要加入三個(gè)commons.jar包：io、logging、fileupload。
3、導(dǎo)入default.css,uploadify.css，jQuery腳本，swfobject腳本和Uploadify插件。并且添加調(diào)用插件使用$，在您的網(wǎng)頁的head部分ready事件：
%@?page?language="java"?contentType="text/html;?charset=utf-8"%
%
String?path?=?request.getContextPath();
String?basePath?=?request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%
!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN"
html
head
base?href="%=basePath%"
titleUpload/title
!--裝載文件--
link?href="css/default.css"?rel="stylesheet"?type="text/css"?/
link?href="css/uploadify.css"?rel="stylesheet"?type="text/css"?/
script?type="text/javascript"?src="scripts/jquery-1.3.2.min.js"/script
script?type="text/javascript"?src="scripts/swfobject.js"/script
script?type="text/javascript"?src="scripts/jquery.uploadify.v2.1.0.min.js"/script
!--ready事件--
script?type="text/javascript"
$(document).ready(function()?{
$("#uploadify").uploadify({
'uploader'???????:?'uploadify.swf',
'script'?????????:?'servlet/Upload',//后臺(tái)處理的請(qǐng)求
'cancelImg'??????:?'images/cancel.png',
'folder'?????????:?'uploads',//您想將文件保存到的路徑
'queueID'????????:?'fileQueue',//與下面的id對(duì)應(yīng)
'queueSizeLimit'??:1,
'fileDesc'????:?'rar文件或zip文件’,????
'fileExt'?:?'*.rar;*.zip',?//控制可上傳文件的擴(kuò)展名，啟用本項(xiàng)時(shí)需同時(shí)聲明fileDesc
'auto'???????????:?false,
'multi'??????????:?true,
'simUploadLimit'?:?2,
'buttonText'?????:?'BROWSE'
});
});
/script????/head
body
div?id="fileQueue"/div
input?type="file"?name="uploadify"?id="uploadify"?/
p
a?href="javascript:jQuery('#uploadify').uploadifyUpload()"開始上傳/anbsp;
a?href="javascript:jQuery('#uploadify').uploadifyClearQueue()"取消所有上傳/a
/p
/body
/html
4、后臺(tái)處理的upload.java
package?com.xzit.upload;
import?java.io.File;
import?java.io.IOException;
import?java.util.Iterator;
import?java.util.List;
import?java.util.UUID;
import?javax.servlet.ServletException;
import?javax.servlet.http.HttpServlet;
import?javax.servlet.http.HttpServletRequest;
import?javax.servlet.http.HttpServletResponse;
import?org.apache.commons.fileupload.FileItem;
import?org.apache.commons.fileupload.FileUploadException;
import?org.apache.commons.fileupload.disk.DiskFileItemFactory;
import?org.apache.commons.fileupload.servlet.ServletFileUpload;
@SuppressWarnings("serial")
public?class?Upload?extends?HttpServlet?{
@SuppressWarnings("unchecked")
public?void?doPost(HttpServletRequest?request,?HttpServletResponse?response)
throws?ServletException,?IOException?{
String?savePath?=?this.getServletConfig().getServletContext()
.getRealPath("");
savePath?=?savePath?+?"/uploads/";
File?f1?=?new?File(savePath);
System.out.println(savePath);
if?(!f1.exists())?{
f1.mkdirs();
}
DiskFileItemFactory?fac?=?new?DiskFileItemFactory();
ServletFileUpload?upload?=?new?ServletFileUpload(fac);
upload.setHeaderEncoding("utf-8");
List?fileList?=?null;
try?{
fileList?=?upload.parseRequest(request);
}?catch?(FileUploadException?ex)?{
return;
}
IteratorFileItem?it?=?fileList.iterator();
String?name?=?"";
String?extName?=?"";
while?(it.hasNext())?{
FileItem?item?=?it.next();
if?(!item.isFormField())?{
name?=?item.getName();
long?size?=?item.getSize();
String?type?=?item.getContentType();
System.out.println(size?+?"?"?+?type);
if?(name?==?null?||?name.trim().equals(""))?{
continue;
}
//擴(kuò)展名格式：?
if?(name.lastIndexOf(".")?=?0)?{
extName?=?name.substring(name.lastIndexOf("."));
}
File?file?=?null;
do?{
//生成文件名：
name?=?UUID.randomUUID().toString();
file?=?new?File(savePath?+?name?+?extName);
}?while?(file.exists());
File?saveFile?=?new?File(savePath?+?name?+?extName);
try?{
item.write(saveFile);
}?catch?(Exception?e)?{
e.printStackTrace();
}
}
}
response.getWriter().print(name?+?extName);
}
}
5、配置處理的servlet
Web.xml文件
?xml?version="1.0"?encoding="UTF-8"?
web-app?version="2.4"
xmlns=""
xmlns:xsi=""
xsi:schemaLocation="
"?
servlet
servlet-nameupload/servlet-name
servlet-classcom.xzit.upload.Upload/servlet-class
/servlet
servlet-mapping
servlet-nameupload/servlet-name
url-pattern/servlet/Upload/url-pattern
/servlet-mapping
welcome-file-list
welcome-fileindex.jsp/welcome-file
/welcome-file-list
/web-app
6.完成。
有哪些好用的 jQuery 圖片上傳插件
1、uploadify
它是針對(duì)jQuery的免費(fèi)文件上傳插件，可以輕松將單個(gè)或多個(gè)文件上傳到網(wǎng)站上，可控制并發(fā)上傳的文件數(shù)，通過接口參數(shù)和CSS控制外觀。Web服務(wù)器需支持flash和后端開發(fā)語言。
2、FancyUpload
它是一個(gè)由CSS和XHTML編寫樣式的Ajax文件上傳工具，安裝簡便，服務(wù)器獨(dú)立，由MooTools模塊驅(qū)動(dòng)，可以在任何現(xiàn)代瀏覽器上使用。
3、Aurigma Upload Suite(Image Uploader)
這是一個(gè)不限大小，不限格式的文件/圖片批量上傳工具，是收費(fèi)控件。它支持云端存儲(chǔ)和客戶端文件處理，支持?jǐn)帱c(diǎn)續(xù)傳，穩(wěn)定可靠。從8.0.8開始，Image Uploader將名稱改為"Aurigma Upload Suite"。
jquery Uploadify上傳文件
Uploadify是JQuery的一個(gè)上傳插件，實(shí)現(xiàn)的效果非常不錯(cuò)，帶進(jìn)度顯示。不過官方提供的實(shí)例時(shí)php版本的，本文將詳細(xì)介紹Uploadify在Aspnet中的使用，您也可以點(diǎn)擊下面的鏈接進(jìn)行演示或下載。
首先按下面的步驟來實(shí)現(xiàn)一個(gè)簡單的上傳功能。
1 創(chuàng)建Web項(xiàng)目，命名為JQueryUploadDemo，從官網(wǎng)上下載最新的版本解壓后添加到項(xiàng)目中。
2 在項(xiàng)目中添加UploadHandler.ashx文件用來處理文件的上傳。
3 在項(xiàng)目中添加UploadFile文件夾，用來存放上傳的文件。
進(jìn)行完上面三步后項(xiàng)目的基本結(jié)構(gòu)如下圖:
4 Default.aspx的html頁的代碼修改如下：
html?xmlns=""
head?runat="server"
titleUploadify/title
link?href="JS/jquery.uploadify-v2.1.0/example/css/default.css"
rel="stylesheet"?type="text/css"?/
link?href="JS/jquery.uploadify-v2.1.0/uploadify.css"
rel="stylesheet"?type="text/css"?/
script?type="text/javascript"
src="JS/jquery.uploadify-v2.1.0/jquery-1.3.2.min.js"/script
script?type="text/javascript"
src="JS/jquery.uploadify-v2.1.0/swfobject.js"/script
script?type="text/javascript"
src="JS/jquery.uploadify-v2.1.0/jquery.uploadify.v2.1.0.min.js"/script
script?type="text/javascript"
$(document).ready(function()
{
$("#uploadify").uploadify({
'uploader':?'JS/jquery.uploadify-v2.1.0/uploadify.swf',
'script':?'UploadHandler.ashx',
'cancelImg':?'JS/jquery.uploadify-v2.1.0/cancel.png',
'folder':?'UploadFile',
'queueID':?'fileQueue',
'auto':?false,
'multi':?true
});
});??
/script
/head
body
div?id="fileQueue"/div
input?type="file"?name="uploadify"?id="uploadify"?/
p
a?href="javascript:$('#uploadify').uploadifyUpload()"上傳/a|?
a?href="javascript:$('#uploadify').uploadifyClearQueue()"取消上傳/a
/p
/body
/html
5? UploadHandler類的ProcessRequest方法代碼如下：
public?void?ProcessRequest(HttpContext?context)
{
context.Response.ContentType?=?"text/plain";???
context.Response.Charset?=?"utf-8";???
HttpPostedFile?file?=?context.Request.Files["Filedata"];???
string??uploadPath?=?
HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\\";??
if?(file?!=?null)??
{??
if?(!Directory.Exists(uploadPath))??
{??
Directory.CreateDirectory(uploadPath);??
}???
file.SaveAs(uploadPath?+?file.FileName);??
//下面這句代碼缺少的話，上傳成功后上傳隊(duì)列的顯示不會(huì)自動(dòng)消失
context.Response.Write("1");??
}???
else??
{???
context.Response.Write("0");???
}??
}
6 運(yùn)行后效果如下圖：
jquery有哪些插件？
//200多個(gè)插件如下?實(shí)際開發(fā)中?請(qǐng)選擇合適的使用
1：文件上傳類jQuery插件
Ajax?File?Upload.
jQUploader.
Multiple?File?Upload?plugin.
jQuery?File?Style.
Styling?an?input?type?file.
Progress?Bar?Plugin.
2：表單驗(yàn)證類jQuery插件
jQuery?Validation.
Auto?Help.
Simple?jQuery?form?validation.
jQuery?XAV?–?form?validations.
jQuery?AlphaNumeric.
Masked?Input.
TypeWatch?Plugin.
Text?limiter?for?form?fields.
Ajax?Username?Check?with?jQuery.
3:表單選擇框類jQuery插件
jQuery?Combobox.
jQuery?controlled?dependent?(or?Cascadign)?Select?List.
Multiple?Selects.
Select?box?manipulation.
Select?Combo?Plugin.
jQuery?–?LinkedSelect
Auto-populate?multiple?select?boxes.
Choose?Plugin?(Select?Replacement).
4:表單基本、輸入框、選擇框等jQuery插件
jQuery?Form?Plugin.
jQuery-Form.
jLook?Nice?Forms.
jNice.
Ping?Plugin.
Toggle?Form?Text.
ToggleVal.
jQuery?Field?Plugin.
jQuery?Form’n?Field?plugin.
jQuery?Checkbox?manipulation.
jTagging.
jQuery?labelcheck.
Overlabel.
3?state?radio?buttons.
ShiftCheckbox?jQuery?Plugin.
Watermark?Input.
jQuery?Checkbox?(checkboxes?with?imags).
jQuery?SpinButton?Control.
jQuery?Ajax?Form?Builder.
jQuery?Focus?Fields.
jQuery?Time?Entry.
5:時(shí)間、日期和顏色選取類jQuery插件
jQuery?UI?Datepicker.
jQuery?date?picker?plugin.
jQuery?Time?Picker.
Time?Picker.
ClickPick.
TimePicker.
Farbtastic?jQuery?Color?Picker?Plugin.
Color?Picker?by?intelliance.fr.
6:投票類jQuery插件
jQuery?Star?Rating?Plugin.
jQuery?Star?Rater.
Content?rater?with?asp.net,?ajax?and?jQuery.
Half-Star?Rating?Plugin.
7:搜索類jQuery插件
jQuery?Suggest.
jQuery?Autocomplete.
jQuery?Autocomplete?Mod.
jQuery?Autocomplete?by?AjaxDaddy.
jQuery?Autocomplete?Plugin?with?HTML?formatting.
jQuery?Autocompleter.
AutoCompleter?(Tutorial?with?PHPMySQL).
quick?Search?jQuery?Plugin.
8:jQuery編輯器插件
jTagEditor.
WYMeditor.
jQuery?jFrame.
Jeditable?–?edit?in?place?plugin?for?jQuery.
jQuery?editable.
jQuery?Disable?Text?Select?Plugin.
Edit?in?Place?with?Ajax?using?jQuery.
jQuery?Plugin?–?Another?In-Place?Editor.
TableEditor.
tEditable?–?in?place?table?editing?for?jQuery.
9:多媒體、視頻、Flash等類jQuery插件
jMedia?–?accessible?multi-media?embedding.
JBEdit?–?Ajax?online?Video?Editor.
jQuery?MP3?Plugin.
jQuery?Media?Plugin.
jQuery?Flash?Plugin.
Embed?QuickTime.
SVG?Integration.
圖片類jQuery插件
ThickBox.
jQuery?lightBox?plugin.
jQuery?Image?Strip.
jQuery?slideViewer.
jQuery?jqGalScroll?2.0.
jQuery?–?jqGalViewII.
jQuery?–?jqGalViewIII.
jQuery?Photo?Slider.
jQuery?Thumbs?–?easily?create?thumbnails.
jQuery?jQIR?Image?Replacement.
jCarousel?Lite.
jQPanView.
jCarousel.
Interface?Imagebox.
Image?Gallery?using?jQuery,?Interface??Reflactions.
simple?jQuery?Gallery.
jQuery?Gallery?Module.
EO?Gallery.
jQuery?ScrollShow.
jQuery?Cycle?Plugin.
jQuery?Flickr.
jQuery?Lazy?Load?Images?Plugin.
Zoomi?–?Zoomable?Thumbnails.
jQuery?Crop?–?crop?any?image?on?the?fly.
Image?Reflection.
10:Google地圖類jQuery插件應(yīng)用
jQuery?Plugin?googlemaps.
jMaps?jQuery?Maps?Framework.
jQmaps.
jQuery??Google?Maps.
jQuery?Maps?Interface?forr?Google?and?Yahoo?maps.
jQuery?J?Maps?–?by?Tane?Piper.
11:游戲類jQuery插件
Tetris?with?jQuery.
jQuery?Chess.
Mad?Libs?Word?Game.
jQuery?Puzzle.
jQuery?Solar?System?(not?a?game?but?awesome?jQuery?Stuff).
12:表格,網(wǎng)格類jQuery插件
UI/Tablesorter.
jQuery?ingrid.
jQuery?Grid?Plugin.
Table?Filter?–?awesome!.
TableEditor.
jQuery?Tree?Tables.
Expandable?“Detail”?Table?Rows.
Sortable?Table?ColdFusion?Costum?Tag?with?jQuery?UI.
jQuery?Bubble.
TableSorter.
Scrollable?HTML?Table.
jQuery?column?Manager?Plugin.
jQuery?tableHover?Plugin.
jQuery?columnHover?Plugin.
jQuery?Grid.
TableSorter?plugin?for?jQuery.
tEditable?–?in?place?table?editing?for?jQuery.
jQuery?charToTable?Plugin.
jQuery?Grid?Column?Sizing.
jQuery?Grid?Row?Sizing.
13:統(tǒng)計(jì)類jQuery插件
jQuery?Wizard?Plugin?.
jQuery?Chart?Plugin.
Bar?Chart.
14:邊框、圓角、背景類jQuery插件
jQuery?Corner.
jQuery?Curvy?Corner.
Nifty?jQuery?Corner.
Transparent?Corners.
jQuery?Corner?Gallery.
Gradient?Plugin.
14:文字和超鏈接類jQuery插件
jQuery?Spoiler?plugin.
Text?Highlighting.
Disable?Text?Select?Plugin.
jQuery?Newsticker.
Auto?line-height?Plugin.
Textgrad?–?a?text?gradient?plugin.
LinkLook?–?a?link?thumbnail?preview.
pager?jQuery?Plugin.
shortKeys?jQuery?Plugin.
jQuery?Biggerlink.
jQuery?Ajax?Link?Checker.
15:文本提示類jQuery插件
jQuery?Plugin?–?Tooltip.
jTip?–?The?jQuery?Tool?Tip.
clueTip.
BetterTip.
Flash?Tooltips?using?jQuery.
ToolTip.
16:菜單和導(dǎo)航類jQuery插件
jQuery?Tabs?Plugin?–?awesome!?.?[demo?nested?tabs.]
another?jQuery?nested?Tab?Set?example?(based?on?jQuery?Tabs?Plugin).
jQuery?idTabs.
jdMenu?–?Hierarchical?Menu?Plugin?for?jQuery.
jQuery?SuckerFish?Style.
jQuery?Plugin?Treeview.
treeView?Basic.
FastFind?Menu.
Sliding?Menu.
Lava?Lamp?jQuery?Menu.
jQuery?iconDock.
jVariations?Control?Panel.
ContextMenu?plugin.
clickMenu.
CSS?Dock?Menu.
jQuery?Pop-up?Menu?Tutorial.
Sliding?Menu.
17:幻燈片、手風(fēng)琴特效類jQuery插件
jQuery?Plugin?Accordion.
jQuery?Accordion?Plugin?Horizontal?Way.
haccordion?–?a?simple?horizontal?accordion?plugin?for?jQuery.
Horizontal?Accordion?by?portalzine.de.
HoverAccordion.
Accordion?Example?from?fmarcia.info.
jQuery?Accordion?Example.
jQuery?Demo?–?Expandable?Sidebar?Menu.
Sliding?Panels?for?jQuery.
jQuery?ToggleElements.
Coda?Slider.
jCarousel.
Accesible?News?Slider?Plugin.
Showing?and?Hiding?code?Examples.
jQuery?Easing?Plugin.
jQuery?Portlets.
AutoScroll.
Innerfade.
18:拖放類jQuery插件
UI/Draggables.
EasyDrag?jQuery?Plugin.
jQuery?Portlets.
jqDnR?–?drag,?drop?resize.
Drag?Demos.
19:XML?XSL?JSON?Feeds相關(guān)jQuery插件
XSLT?Plugin.
jQuery?Ajax?call?and?result?XML?parsing.
xmlObjectifier?–?Converts?XML?DOM?to?JSON.
jQuery?XSL?Transform.
jQuery?Taconite?–?multiple?Dom?updates.
RSS/ATOM?Feed?Parser?Plugin.
jQuery?Google?Feed?Plugin.
20:瀏覽器
Wresize?–?IE?Resize?event?Fix?Plugin.
jQuery?ifixpng.
jQuery?pngFix.
Link?Scrubber?–?removes?the?dotted?line?onfocus?from?links.
jQuery?Perciformes?–?the?entire?suckerfish?familly?under?one?roof.
Background?Iframe.
QinIE?–?for?proper?display?of?Q?tags?in?IE.
jQuery?Accessibility?Plugin.
jQuery?MouseWheel?Plugin.
21:警告,?提示,?確認(rèn)等對(duì)話框
jQuery?Impromptu.
jQuery?Confirm?Plugin.
jqModal.
SimpleModal.
CSS
jQuery?Style?Switcher.
JSS?–?Javascript?StyleSheets.
jQuery?Rule?–?creation/manipulation?of?CSS?Rules.
jPrintArea.
22:DOM、AJAX和其它JQuery插件
FlyDOM.
jQuery?Dimenion?Plugin.
jQuery?Loggin.
Metadata?–?extract?metadata?from?classes,?attributes,?elements.
Super-tiny?Client-Side?Include?Javascript?jQuery?Plugin.
Undo?Made?Easy?with?Ajax.
JHeartbeat?–?periodically?poll?the?server.
Lazy?Load?Plugin.
Live?Query.
jQuery?Timers.
jQuery?Share?it?–?display?social?bookmarking?icons.
jQuery?serverCookieJar.
jQuery?autoSave.
jQuery?Puffer.
jQuery?iFrame?Plugin.
Cookie?Plugin?for?jQuery.
jQuery?Spy?–?awesome?plugin.
Effect?Delay?Trick.
jQuick?–?a?quick?tag?creator?for?jQuery..
如何通過jQuery的上傳插件ajaxFileUpload上傳文件給webservice
var
elementIds=["flag"];
//flag為id、name屬性名
$.ajaxFileUpload({
url:
'uploadAjax.htm',
type:
'post',
secureuri:
false,
//一般設(shè)置為false
fileElementId:
'file',
//
上傳文件的id、name屬性名
dataType:
'text',
//返回值類型，一般設(shè)置為json、application/json
elementIds:
elementIds,
//傳遞參數(shù)到服務(wù)器
success:
function(data,
status){
alert(data);
},
error:
function(data,
status,
e){
alert(e);
}
});
分享題目：jquery上傳插件,jq文件上傳插件
轉(zhuǎn)載源于：http://muchs.cn/article12/pheigc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、定制開發(fā)、小程序開發(fā)、域名注冊(cè)、服務(wù)器托管、做網(wǎng)站
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
