jq文件上傳插件
⑴ 如何使用Mason來實現文件上傳
用普通的js有點兒過時了。可以採用jQuery。文件上傳是網站很常見的功能之一，通過使用jQuery可以讓上傳過程更加人性化，更好的用戶體驗。
介紹20個jQuery的文件上傳插件，其中有一些是教程。
1. Plupload
Plupload 是一個Web瀏覽器上的界面友好的文件上傳模塊，可顯示上傳進度、圖像自動縮略和上傳分塊。可同時上傳多個文件。
2. The KillersAjax Upload
該插件使用 XHR 用於上傳多個文件，支持上傳進度顯示，但不支持 IE
3. SWFUpload jQuery Plugin
4. AjaxFileUpload
5. Uploadify
Uploadify簡單說來，是基於Jquery的一款文件上傳插件。它的功能特色總結如下：
支持單文件或多文件上傳，可控制並發上傳的文件數
在伺服器端支持各種語言與之配合使用，諸如php,.NET,java……
通過參數可配置上傳文件類型及大小限制
通過參數可配置是否選擇文件後自動上傳
易於擴展，可控制每一步驟的回調函數（onSelect, onCancel……）
通過介面參數和CSS控制外觀
6. jQuery Multiple File Upload Plugin
7. jqUploader
jqUploader 是實現文件上傳的jQuery插件
8. jQuery Form Plugin
jQuery Form Plugin 是一個擴展表單操作的 jQuery 插件，直接文件上傳表單
9. jQuery Form Plugin
10. jqswfupload
11. uploadprogress
12. jQuery File Upload
13. Multiple File Upload With Progress Bar Using jQuery
14. jQuery.upload
一個簡單的 Ajax 文件上傳插件
15. Ajax File Upload Script Using jQuery
jQuery File Uploader 使用 iframe 來處理上傳過程
16. jQuery Custom File Upload Input
17. Image Upload and Cropping with PHP and Jquery
18. PHP & jQuery image upload and crop
19. AJAX upload progress bars with jQuery, Django and nginx
20. Uploading Files with AJAX
21. AJAX Multiple File Upload Form Using jQuery
22. FancyUpload – Swiff meets Ajax (v3.0)
FancyUpload是一個採用Flash與Ajax（MooTools）技術實現包含上傳進度條的多文件上傳組件，類似於SWFUpload。MooTools是一個與prototype相類似的一個Ajax框架。
⑵ jquery怎麼上傳多個文件上傳
jquery有個插件叫uploadify
http://www.uploadify.com/
$(function() { $("#file_upload_1").uploadify({ height : 30, swf : '/uploadify/uploadify.swf', uploader : '/uploadify/uploadify.php', width : 120 });});
⑶ jQuery實現文件上傳。
/*jQuery實現文件上傳，參考例子如下：
packagecom.kinth.hddpt.file.action;
importjava.io.File;
importjava.io.FileNotFoundException;
importjava.io.FileOutputStream;
importjava.io.IOException;
importjava.io.InputStream;
importjava.io.OutputStream;
importjava.util.ArrayList;
importjava.util.Calendar;
importjava.util.Enumeration;
importjava.util.Hashtable;
importjava.util.List;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importnet.sf.json.JSONArray;
importorg.apache.commons.logging.Log;
importorg.apache.commons.logging.LogFactory;
importorg.apache.struts.action.ActionForm;
importorg.apache.struts.action.ActionForward;
importorg.apache.struts.action.ActionMapping;
importorg.apache.struts.upload.FormFile;
importorg.hibernate.criterion.MatchMode;
importorg.hibernate.criterion.Order;
importorg.hibernate.criterion.Restrictions;
importcom.gdcn.bpaf.common.base.search.MyCriteria;
importcom.gdcn.bpaf.common.base.search.MyCriteriaFactory;
importcom.gdcn.bpaf.common.base.service.BaseService;
importcom.gdcn.bpaf.common.helper.PagerList;
importcom.gdcn.bpaf.common.helper.WebHelper;
importcom.gdcn.bpaf.common.taglib.SplitPage;
importcom.gdcn.bpaf.security.model.LogonVO;
importcom.gdcn.components.appauth.common.helper.DictionaryHelper;
importcom.kinth.common.base.action.BaseAction;
importcom.kinth.hddpt.file.action.form.FileCatalogForm;
importcom.kinth.hddpt.file.model.FileCatalog;
importcom.kinth.hddpt.file.service.FileCatalogService;
importcom.kinth.hddpt.file.util.MyZTreeNode;
/**
*<p>
*description:「文件上傳的Struts層請求處理類」
*</p>
*@date:2013-1-14
*/
<FileCatalog>{
@SuppressWarnings("unused")
privatestaticLoglog=LogFactory.getLog(FileCatalogAction.class);//日誌記錄
;
//刪除記錄的同時刪除相應文件
publicActionForwardfileDelete(ActionMappingmapping,ActionFormform,
HttpServletRequestrequest,HttpServletResponseresponse)
throwsException{
String[]id=request.getParameterValues("resourceId");
if(id!=null&&id[0].contains(",")){
id=id[0].split(",");
}
String[]fileUrls=newString[id.length];
for(intj=0;j<id.length;j++){
fileUrls[j]=fileCatalogService.findObject(id[j]).getFileUrl();
if(!isEmpty(fileUrls[j])){
//如果該文件夾不存在則創建一個uptext文件夾
Filefileup=newFile(fileUrls[j]);
if(fileup.exists()||fileup!=null){
fileup.delete();
}
}
fileCatalogService.deleteObject(id[j]);
}
setAllActionInfos(request);
returnlist(mapping,form,request,response);
}
@Override
publicActionForwardsave(ActionMappingmapping,ActionFormform,
HttpServletRequestrequest,HttpServletResponseresponse)
throwsException{
Stringid=request.getParameter("resourceId");
BooleanfileFlag=Boolean.valueOf(request.getParameter("fileFlag"));
if(fileFlag!=null&&fileFlag==true){
returnsuper.save(mapping,form,request,response);
}else{
StringfileUrl=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();
}
returnnull;
}
@SuppressWarnings("unchecked")
publicStringfileUpload(ActionFormform,HttpServletRequestrequest,Stringid,BooleanfileFlag)throwsFileNotFoundException,IOException{
request.setCharacterEncoding("GBK");
StringbasePath=getServlet().getServletConfig().getServletContext().getRealPath("")+"/";
StringfilePath="uploads/";//獲取項目根路徑;
/*注釋部分對應jqueryuploaploadify插件的後台代碼,只是還存在編碼問題，默認為utf-8
StringsavePath=getServlet().getServletConfig().getServletContext().getRealPath("");//獲取項目根路徑
savePath=savePath+"\uploads\";
//讀取上傳來的文件信息
Hashtable<String,FormFile>fileHashtable=form.getMultipartRequestHandler().getFileElements();
Enumeration<String>enumeration=fileHashtable.keys();
enumeration.hasMoreElements();
Stringkey=(String)enumeration.nextElement();
FormFileformFile=(FormFile)fileHashtable.get(key);
Stringfilename=formFile.getFileName().trim();//文件名
filename=newEncodeChange().changeCode(filename);
Stringfiletype=filename.substring(filename.lastIndexOf(".")+1);//文件類型
savePath=savePath+filetype+"\";
System.out.println("path:"+savePath);
StringrealPath=savePath+filename;//真實文件路徑
//如果該文件夾不存在則創建一個文件夾
Filefileup=newFile(savePath);
if(!fileup.exists()||fileup==null){
fileup.mkdirs();
}
if(!filename.equals("")){
//在這里上傳文件
InputStreamis=formFile.getInputStream();
OutputStreamos=newFileOutputStream(realPath);
intbytesRead=0;
byte[]buffer=newbyte[8192];
while((bytesRead=is.read(buffer,0,8192))!=-1){
os.write(buffer,0,bytesRead);
}
os.close();
is.close();
//如果是修改操作，則刪除原來的文件
Stringid=request.getParameter("resourceId");
if(!isEmpty(id)){
FileCatalogfileCatalog=fileCatalogService.findObject(id);
StringfileUrl=fileCatalog.getFileUrl();
if(!isEmpty(fileUrl)){
Filefiledel=newFile(fileUrl);
if(filedel.exists()||filedel!=null){
filedel.delete();
}
}
request.setAttribute("entity",fileCatalog);
}
response.getWriter().print(realPath);//向頁面端返回結果信息
}*/
//讀取上傳來的文件信息
Hashtable<String,FormFile>fileHashtable=form.getMultipartRequestHandler().getFileElements();
Enumeration<String>enumeration=fileHashtable.keys();
enumeration.hasMoreElements();
Stringkey=(String)enumeration.nextElement();
FormFileformFile=(FormFile)fileHashtable.get(key);
Stringfilename=formFile.getFileName().trim();//文件名
Stringfiletype=filename.substring(filename.lastIndexOf(".")+1);//文件類型
IntegerfileSize=formFile.getFileSize();
filePath+=Calendar.getInstance().get(Calendar.YEAR)+"/"+filetype+"/";
StringrealPath=basePath+filePath+filename;//真實文件路徑
if(!filename.equals("")){
//如果是修改操作，則刪除原來的文件
if(!isEmpty(id)){
FileCatalogfileCatalog=fileCatalogService.findObject(id);
StringfileUrl=fileCatalog.getFileUrl();
if(!isEmpty(fileUrl)){
fileUrl=basePath+fileUrl;
Filefiledel=newFile(fileUrl);
if(filedel.exists()||filedel!=null){
filedel.delete();
}
}
request.setAttribute("entity",fileCatalog);
}
//如果該文件夾不存在則創建一個文件夾
Filefileup=newFile(basePath+filePath);
if(!fileup.exists()||fileup==null){
fileup.mkdirs();
}
//在這里上傳文件
InputStreamis=formFile.getInputStream();
OutputStreamos=newFileOutputStream(realPath);
intbytesRead=0;
byte[]buffer=newbyte[8192];
while((bytesRead=is.read(buffer,0,8192))!=-1){
os.write(buffer,0,bytesRead);
}
os.close();
is.close();
}
filePath+=filename;
Stringresult="{"fileName":""+filename+"","fileType":""+filetype+"","fileSize":"+fileSize+","fileUrl":""+filePath+""}";
returnresult;
}
(){
returnfileCatalogService;
}
(){
this.fileCatalogService=fileCatalogService;
}
}
⑷ 如何使用在網上下載的JQ（比方說文件上傳）插件在zend freamwork中的使用步驟是什麼
在靜態頁面引用一下JQ。
⑸ jquery 上傳文件插件uploadify jsp版本
寫一個servlet，看這里
http://www.javaeye.com/topic/376101
⑹ 情況jq中有類似Element 文件上傳功能的插件嗎
jquery uploadify
⑺ 關於jquery file upload插件，上傳中文文件，服務端那邊變亂碼，有人遇到過嗎怎樣解決
要轉碼 因為 Windows 的中文名 是gbk jqfileup 使用 utf8 了 所以 存儲時要轉碼
$targetFile = iconv("utf-8","gbk",$targetFile);
⑻ jquery有哪些插件
//200多個插件如下實際開發中請選擇合適的使用
1：文件上傳類jQuery插件
AjaxFileUpload.
jQUploader.
MultipleFileUploadplugin.
jQueryFileStyle.
Stylinganinputtypefile.
ProgressBarPlugin.
2：表單驗證類jQuery插件
jQueryValidation.
AutoHelp.
SimplejQueryformvalidation.
jQueryXAV–formvalidations.
jQueryAlphaNumeric.
MaskedInput.
TypeWatchPlugin.
Textlimiterforformfields.
AjaxUsernameCheckwithjQuery.
3:表單選擇框類jQuery插件
jQueryCombobox.
jQuerycontrolleddependent(orCascadign)SelectList.
MultipleSelects.
Selectboxmanipulation.
SelectComboPlugin.
jQuery–LinkedSelect
Auto-populatemultipleselectboxes.
ChoosePlugin(SelectReplacement).
4:表單基本、輸入框、選擇框等jQuery插件
jQueryFormPlugin.
jQuery-Form.
jLookNiceForms.
jNice.
PingPlugin.
ToggleFormText.
ToggleVal.
jQueryFieldPlugin.
jQueryForm』nFieldplugin.
jQueryCheckboxmanipulation.
jTagging.
jQuerylabelcheck.
Overlabel.
3stateradiobuttons.
ShiftCheckboxjQueryPlugin.
WatermarkInput.
jQueryCheckbox(checkboxeswithimags).
jQuerySpinButtonControl.
jQueryAjaxFormBuilder.
jQueryFocusFields.
jQueryTimeEntry.
5:時間、日期和顏色選取類jQuery插件
jQueryUIDatepicker.
jQuerydatepickerplugin.
jQueryTimePicker.
TimePicker.
ClickPick.
TimePicker.
.
ColorPickerbyintelliance.fr.
6:投票類jQuery插件
jQueryStarRatingPlugin.
jQueryStarRater.
Contentraterwithasp.net,ajaxandjQuery.
Half-StarRatingPlugin.
7:搜索類jQuery插件
jQuerySuggest.
jQueryAutocomplete.
jQueryAutocompleteMod.
jQueryAutocompletebyAjaxDaddy.
.
jQueryAutocompleter.
AutoCompleter(TutorialwithPHP&MySQL).
quickSearchjQueryPlugin.
8:jQuery編輯器插件
jTagEditor.
WYMeditor.
jQueryjFrame.
Jeditable–editinplacepluginforjQuery.
jQueryeditable.
jQueryDisableTextSelectPlugin.
.
jQueryPlugin–AnotherIn-PlaceEditor.
TableEditor.
tEditable–inplacetableeditingforjQuery.
9:多媒體、視頻、Flash等類jQuery插件
jMedia–accessiblemulti-mediaembedding.
JBEdit–AjaxonlineVideoEditor.
jQueryMP3Plugin.
jQueryMediaPlugin.
jQueryFlashPlugin.
EmbedQuickTime.
SVGIntegration.
圖片類jQuery插件
ThickBox.
jQuerylightBoxplugin.
jQueryImageStrip.
jQueryslideViewer.
jQueryjqGalScroll2.0.
jQuery–jqGalViewII.
jQuery–jqGalViewIII.
jQueryPhotoSlider.
jQueryThumbs–easilycreatethumbnails.
jQueryjQIRImageReplacement.
jCarouselLite.
jQPanView.
jCarousel.
InterfaceImagebox.
ImageGalleryusingjQuery,Interface&Reflactions.
simplejQueryGallery.
jQueryGalleryMole.
EOGallery.
jQueryScrollShow.
jQueryCyclePlugin.
jQueryFlickr.
jQueryLazyLoadImagesPlugin.
Zoomi–ZoomableThumbnails.
jQueryCrop–cropanyimageonthefly.
ImageReflection.
10:Google地圖類jQuery插件應用
jQueryPlugingooglemaps.
jMapsjQueryMapsFramework.
jQmaps.
jQuery&GoogleMaps.
.
jQueryJMaps–byTanePiper.
11:游戲類jQuery插件
TetriswithjQuery.
jQueryChess.
MadLibsWordGame.
jQueryPuzzle.
jQuerySolarSystem(notagamebutawesomejQueryStuff).
12:表格,網格類jQuery插件
UI/Tablesorter.
jQueryingrid.
jQueryGridPlugin.
TableFilter–awesome!.
TableEditor.
jQueryTreeTables.
Expandable「Detail」TableRows.
.
jQueryBubble.
TableSorter.
ScrollableHTMLTable.
jQuerycolumnManagerPlugin.
jQuerytableHoverPlugin.
jQuerycolumnHoverPlugin.
jQueryGrid.
TableSorterpluginforjQuery.
tEditable–inplacetableeditingforjQuery.
jQuerycharToTablePlugin.
jQueryGridColumnSizing.
jQueryGridRowSizing.
13:統計類jQuery插件
jQueryWizardPlugin.
jQueryChartPlugin.
BarChart.
14:邊框、圓角、背景類jQuery插件
jQueryCorner.
jQueryCurvyCorner.
NiftyjQueryCorner.
TransparentCorners.
jQueryCornerGallery.
GradientPlugin.
14:文字和超鏈接類jQuery插件
jQuerySpoilerplugin.
TextHighlighting.
DisableTextSelectPlugin.
jQueryNewsticker.
Autoline-heightPlugin.
Textgrad–atextgradientplugin.
LinkLook–alinkthumbnailpreview.
pagerjQueryPlugin.
shortKeysjQueryPlugin.
jQueryBiggerlink.
jQueryAjaxLinkChecker.
15:文本提示類jQuery插件
jQueryPlugin–Tooltip.
jTip–ThejQueryToolTip.
clueTip.
BetterTip.
FlashTooltipsusingjQuery.
ToolTip.
16:菜單和導航類jQuery插件
jQueryTabsPlugin–awesome!.[demonestedtabs.]
(basedonjQueryTabsPlugin).
jQueryidTabs.
jdMenu–.
jQuerySuckerFishStyle.
jQueryPluginTreeview.
treeViewBasic.
FastFindMenu.
SlidingMenu.
LavaLampjQueryMenu.
jQueryiconDock.
jVariationsControlPanel.
ContextMenuplugin.
clickMenu.
CSSDockMenu.
jQueryPop-upMenuTutorial.
SlidingMenu.
http://stilbuero.de/jquery/tabs_3/
17:幻燈片、手風琴特效類jQuery插件
jQueryPluginAccordion.
.
haccordion–.
.de.
HoverAccordion.
AccordionExamplefromfmarcia.info.
jQueryAccordionExample.
jQueryDemo–ExpandableSidebarMenu.
SlidingPanelsforjQuery.
jQueryToggleElements.
CodaSlider.
jCarousel.
AccesibleNewsSliderPlugin.
ShowingandHidingcodeExamples.
jQueryEasingPlugin.
jQueryPortlets.
AutoScroll.
Innerfade.
18:拖放類jQuery插件
UI/Draggables.
EasyDragjQueryPlugin.
jQueryPortlets.
jqDnR–drag,dropresize.
DragDemos.
19:XMLXSLJSONFeeds相關jQuery插件
XSLTPlugin.
.
xmlObjectifier–ConvertsXMLDOMtoJSON.
jQueryXSLTransform.
jQueryTaconite–multipleDomupdates.
RSS/ATOMFeedParserPlugin.
jQueryGoogleFeedPlugin.
20:瀏覽器
Wresize–IEResizeeventFixPlugin.
jQueryifixpng.
jQuerypngFix.
LinkScrubber–.
jQueryPerciformes–.
BackgroundIframe.
QinIE–forproperdisplayofQtagsinIE.
jQueryAccessibilityPlugin.
jQueryMouseWheelPlugin.
21:警告,提示,確認等對話框
jQueryImpromptu.
jQueryConfirmPlugin.
jqModal.
SimpleModal.
CSS
jQueryStyleSwitcher.
JSS–JavascriptStyleSheets.
jQueryRule–creation/manipulationofCSSRules.
jPrintArea.
22:DOM、AJAX和其它JQuery插件
FlyDOM.
jQueryDimenionPlugin.
jQueryLoggin.
Metadata–extractmetadatafromclasses,attributes,elements.
Super-tinyClient-.
UndoMadeEasywithAjax.
JHeartbeat–periodicallypolltheserver.
LazyLoadPlugin.
LiveQuery.
jQueryTimers.
jQueryShareit–displaysocialbookmarkingicons.
jQueryserverCookieJar.
jQueryautoSave.
jQueryPuffer.
jQueryiFramePlugin.
CookiePluginforjQuery.
jQuerySpy–awesomeplugin.
EffectDelayTrick.
jQuick–aquicktagcreatorforjQuery..
⑼ 怎麼實現跨域，非同步文件上傳並返回處理結果
先講講如何跨域，跨域方法很多，訪問方式其實與本域名訪問沒有很大不同。簡單列舉幾個：
使用window.postMessage實現跨域通信。
使用ajax非同步載入其他網站資源，如載入QQ登陸成功的資料。
頭部的css、js，img標簽中的src等，都可以填寫外部的鏈接，都算跨域。
然後再講講非同步文件上傳，非同步上傳和非同步上傳文件其實很類似，下面是使用jq的ajaxupload插件進行上傳的示例
$.ajaxFileUpload({
url:'upload.action',//用於文件上傳的伺服器端請求地址
secureuri:false,//一般設置為false
fileElementId:'upload',//文件上傳控制項的id屬性<inputtype="file"id="upload"name="upload"/>
dataType:'json',//返回值類型一般設置為json
success:function(data,status){//伺服器成功響應處理函數
alert(data.message);//從伺服器返回的json中取出message中的數據,其中message為在struts2中action中定義的成員變數
$("#img").attr("src",data.imagePath);
if(typeof(data.error)!='undefined'){
if(data.error!=''){
alert(data.error);
}else{
alert(data.message);
}
}
},
error:function(data,status,e){//伺服器響應失敗處理函數
alert(e);
}
});
⑽ 如何利用自定義文本框+圖片來實現文件上傳效果
用普通的js有點兒過時了。可以採用jQuery。文件上傳是網站很常見的功能之一，通過使用jQuery可以讓上傳過程更加人性化，更好的用戶體驗。
介紹20個jQuery的文件上傳插件，其中有一些是教程。
1. Plupload
Plupload 是一個Web瀏覽器上的界面友好的文件上傳模塊，可顯示上傳進度、圖像自動縮略和上傳分塊。可同時上傳多個文件。
2. The KillersAjax Upload
該插件使用 XHR 用於上傳多個文件，支持上傳進度顯示，但不支持 IE
3. SWFUpload jQuery Plugin
4. AjaxFileUpload
5. Uploadify
Uploadify簡單說來，是基於Jquery的一款文件上傳插件。它的功能特色總結如下：
支持單文件或多文件上傳，可控制並發上傳的文件數
在伺服器端支持各種語言與之配合使用，諸如PHP,.NET,Java……
通過參數可配置上傳文件類型及大小限制
通過參數可配置是否選擇文件後自動上傳
易於擴展，可控制每一步驟的回調函數（onSelect, onCancel……）
通過介面參數和CSS控制外觀
6. jQuery Multiple File Upload Plugin
7. jqUploader
jqUploader 是實現文件上傳的jQuery插件
8. jQuery Form Plugin
jQuery Form Plugin 是一個擴展表單操作的 jQuery 插件，直接文件上傳表單
9. jQuery Form Plugin
10. jqswfupload
11. uploadprogress
12. jQuery File Upload
13. Multiple File Upload With Progress Bar Using jQuery
14. jQuery.upload
一個簡單的 Ajax 文件上傳插件
15. Ajax File Upload Script Using jQuery
jQuery File Uploader 使用 iframe 來處理上傳過程
16. jQuery Custom File Upload Input
17. Image Upload and Cropping with PHP and Jquery
18. PHP & jQuery image upload and crop
19. AJAX upload progress bars with jQuery, Django and nginx
20. Uploading Files with AJAX
21. AJAX Multiple File Upload Form Using jQuery
22. FancyUpload – Swiff meets Ajax (v3.0)
FancyUpload是一個採用Flash與Ajax（MooTools）技術實現包含上傳進度條的多文件上傳組件，類似於SWFUpload。MooTools是一個與prototype相類似的一個Ajax框架。
去網路，搜索這裡面的名稱，就能找到了。 非常強大。