最初に住所を捨て、http://fex-team.github.io/webuploader/
比較的完全なデモケースドキュメントがあります。この記事では、主にファイルのアップロードと画像のアップロードに基づいて多数のコメントを追加します。これにより、基本的に、コードの各行が理解するためのコメントがあることが保証されます。公式ウェブサイトのデモの拡張バージョンです。誰もがプラグインをよりよく理解するのに役立つことを願っています。
まず、ファイルアップロード
jQuery(function(){var $ = jquery、$ list = $( '#thelist')、$ btn = $( '#ctlbtn')、state = 'phends'、uploader; // initialization、実際にwebuploader.uploader uploader = webuploader.create(// uncriptored image swptise:webuploader.create)に直接アクセスできます。 base_url + '/js/uploader.swf'、//サーバーに保存するためにバックグラウンドコードに送信します。 // uploaderによってイベントを追加します。ファイルがキューに追加されたとき、uploader.on( 'filequeued'、function(file){//キューに参加する場合、その後のアップロードが失敗するなどのスタイルを作成し、イベントスタイルを指すように定義します。 + '<p>アップロードを待ちます</p>' </div>); // $ liの下でクラスの進行状況を見つけ、$パーセントとして定義します------ $パーセント= $ li.find('。progrogress-bar ')を作成する理由// '</div>')。 uploader uploader.on( 'uploadsuccess'、function(file){//ファイルが追加されたときにトリガーされ、$( '#'+file.id).find( 'p.state')。 'uploaderror'、function(file){//ファイルが追加されたときにトリガーされ、テキストをアップロードエラー$( '#'+file.id)。 function( '#'+file.id)。 「アップロード '}(type ==' state = 'poused}) }}); //ボタンをクリックすると、ステータスに応じて起動するか、$ btn.on(click '、function(){if(state ===' uploading '){uploader.stop();}次に、写真をアップロードします
jQuery(function(){// jQueryをグローバル変数に割り当てるvar $ = jquery、$ list = $( '#filelist')、//網膜を最適化します。 Web Uploader Instance Uploader; http://webuploader.duapp.com/fileupload.php」 'gif、jpg、jpeg、bmp、png'、mimetypes: 'image/*'});情報 '<div>' + file.name + '</div>' + '</div>')、$ $ li.find( 'img');インタラクティブ//コールバックには2つのパラメーターが呼ばれます。SRCはサムネイルアップローダーのアドレスを保存します。 sumbnailheight); $(span> </p> ')。 '#'+file.id).addclass( 'Upload-state-done'); $( '<div> div>')。以下は、アップロードされたファイルを取得し、アップロードされたファイルの実際のパスをサーバーに書き込むために使用されるJavaバックグラウンドコードです。
1.まず、アップロードされたファイルのストレージ場所を作成する必要があります。一般的な場所は、一時的なフォルダーと実際のフォルダーに分かれています。次に、これら2つのフォルダーの絶対パスを取得する必要があります。サーブレットでは、これを行うことができます。
ServletContext Application = this.getServletContext(); string tempdirectory = application.getRealPath(constant.temp_directory) + "/"; string rewdirectory = application.getRealPath(custrance.real_directory) + "/";
次に、ファイルファクトリ、つまり倉庫を作成します。パラメーターは、フラッシュを保存することの大きさを示します。
コードコピーは次のとおりです。FileItemFactoryFactory= new DiskFileItemFactory(custrance.size_threshold、new file(tempdirectory));
servletfileupload upload = new servletfileupload(Factory);
2。アップロードされたファイルを設定します
upload.setsizemax(500*1024*1024); //このアップロードの最大値を500m3に設定し、リクエスト本文を解析し、アップロードファイルを取得し、例外をスローせずに実際のパスを書き込みます
List <FileItem> list = upload.parserequest(request); iterator <fileitem> iter = list.iterator(); while(iter.hasnext()){fileitem item = iter.next(); //item.isformfield()は、現在のオブジェクトがファイルフォームフィールドのデータであるかどうかを判断するために使用されます。返品値が真の場合、それは(item.isformfield()){system.out.println( "rearn form field" +item.getfieldname())の場合、通常のフォームフィールドではないことを意味します。 System.out.println(item.getString( "utf-8")); } else {//system.out.println("file form field " + item.getfieldname()); /**ファイルフォームフィールドのみがオブジェクトの内容を実際のフォルダーに書き込みます*/string lastpath = item.getName(); //アップロードされたファイルの名前を取得lastPath.Substring(lastPath.lastIndexof( "。")); string filename = uuid.randomuuid()。toString()。置換( " - "、 "") + lastPath; item.write(new file(readirectory+filename));パッケージcom.lanyou.support.servlet; import java.io.file; import java.io.ioexception; Import java.io.io.printwriter; Import java.util.list; import javax.servlet.servletexception; Import javax.servlet.http.httpservlet; Import; javax.servlet.http.httpservletrequest;インポートjavax.servlet.http.httpservletresponse; Import net.sf.json.jsonobject; Import org.apache.commons.fileupload.fileitem; org.apache.commons.fileupload.disk.diskfileitemfactory; Import org.apache.commons.fileupload.servlet.servletfileupload; import org.apache.commons.logging.log; import org.apache.commons.logging.logfactory; org.apache.commons.logging.logfactory; Import org.apache.struts2.servletactionContext; public class fileupload extends httpservlet {private static final long serialversionuid = 1l; private static logger = logfactory.getlog(fileupload.class); @Override Protected void doget(httpservletrequest req、httpservletresponse rep)servletexception、ioexception {dopost(req、rep); } @Override Protected void dopost(httpservletrequest req、httpservletresponse rep)servletexception、ioexception {//タイプ1イベント2APK文字列T = req.getParameter( "t")== null? "1":req.getParameter( "t").trim();文字列path = ""; jsonobject ob = new jsonobject(); {//要求メッセージ内の各アイテムを個別のディスクファイレイトオブジェクトにカプセル化するように{//タスク//アップロードされたファイルアイテムが小さいときにメモリに保存し、ディスクがゼロのときにディスクに保存します。 servletfileupload servletfileupload = new servletfileupload(Factory); //アップロードされたファイルservletfileupload.setsizemax(1024 * 1024 * 2); //最大2mデータservletfileupload.setfilesizemax(2 * 1024 * 1024); servletFileUpload.setHeaderEncoding("UTF-8");// Solve the problem of garbled file name//Solve the request body, get the uploaded file, and write the real path if no exception is thrown//Get the file list according to the request List<FileItem> fileItemsList = servletFileUpload.parseRequest(req); //(fileitem item:fileitemslist)のファイルリストから個別のファイルオブジェクトを取得{//ファイルが通常のフォームタイプであるかどうかを守り、ファイルタイプが判断に入るかどうかを防御します。 } // System.out.println( "アップロードされたファイルのサイズ:"+item.getSize()); // system.out.println( "ファイルタイプのアップロード:"+item.getContentType()); // system.out.println( "ファイル名のアップロード:"+item.getName()); //ファイル名文字列filename = item.getName();文字列ent = ""; // content type if(item.getContentType()。equalsignoreCase( "Image/x-png")|| item.getContentType()。 } else if(item.getContentType()。equalsignOreCase( "Image/gif")){ent = ".gif"; } else if(item.getContentType()。equalSignOreCase( "Image/bmp")){ent = ".bmp"; } else if(item.getContentType()。equalsignOreCase( "Image/pjpeg")|| item.getContentType()。equalSignOreCase( "image/jpeg")){ent = ".jpg"; } //ファイルの取得if(filename.lastindexof( "。") } filename = "ev_" + system.currenttimemillis() + ent; //ファイルパスを定義するフォルダー構造に応じて、(t.equals( "1")){path = "upload/ev/" + filename; } else {path = "upload/pk/" + filename; } //ファイルをサーバーに保存ファイル= new file(req.getSession()。getServletContext().getRealPath(PATH)); if(!file.getParentFile()。exists()){file.getParentFile()。mkdirs(); } item.write(file); // logger.info(path); // 壊す; ob.accumulate( "url"、path); }} resp.setContentType( "text/html; charset = utf-8"); resp.getWriter()。write(ob.tostring()); } catch(Exception e){e.printstacktrace(); }最後に{//応答クライアント// resp.setContentType( "text/html; charset = utf-8"); // resp.getWriter()。write(ob.toString()); }}}上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。