The Upload Component is often used in projects. I have been using the uploadify component and it feels quite good. The following shows how to use it.
1. First download the uploadify-v2.1.4 package, put it in the project
2. Write the initialization method for calling uploadify
Function upfile (URL, id1, Id2) {jquery ("# filedata"). uploadify ({'upload': '/static/plugin/uploadify/uploadify.swf? Ver = '+ new date (). gettime (), // is the built-in flash of the component. It is used to open the button for selecting a local file/* 'buttonimg': '/plugin/uploadify/upload.jpg', 'width': 120, 'height': 30, */'wmode': 'opaque ', 'script': URL + '? Ver = '+ new date (). gettime (), // process the upload path. Here, struts2 is XXX. action 'canonicalmg ':'/static/plugin/uploadify/cancel.png ', // The button image for canceling the file upload, which is a cross-stick 'sizelimit': 20971520, // The size of the file that can be uploaded is 20 mb 'filedatamame': 'filedata'. // The value must be consistent with the name attribute value of input. struts2 can process 'queueid ': 'filequeue ', 'auto': True, // whether to automatically upload 'multi': true after selecting a file, // whether multi-File Upload is supported 'queuesizelimmit': 1, // default number of uploaded files 'simuploadlimit ': 1, // maximum number of uploaded files each time 'buttontext': 'uplo Ad File ', // The text on the button 'displaydata': 'centage', // there are two types: Speed and percentage. One is the display speed, and the other is the display completion percentage 'rolover ': false, 'filedesc ':'*. * ', //' supported formats: JPG/GIF/JPEG/PNG/BMP. ', // if the following 'fileext' attribute is configured, this attribute is required ':'*. * ', // allowed format ,'*. JPG ;*. GIF ;*. JPEG ;*. PNG ;*. BMP ''*. doc ;*. pdf ;*. RAR ''oncomplete': function (event, queueid, fileobj, response, data) {jquery ("#" + id1 ). text (response); jquery ("#" + Id2 ). val (response); j Query ("# result" pai.html ("You have successfully uploaded the file! "); // Display the upload success result setinterval (" showresult () ", 2000); // Delete the displayed upload success result after three seconds}, 'onselect': function (event, queueid, fileobj) {}, 'oncancel': function (event, queueid, fileobj, data) {jquery ('# filedata '). uploadifycancel (queueid) ;}, 'onqueuefull ': function (event, data) {}}) ;} function showresult () {// Delete the displayed upload success result jquery ("# result" ).html ("");} function uploadfile () {// Upload File jquery ('# filedata '). uploadifyupload ();} function cancleupload () {jquery ('# filedata '). uploadifyclearqueue ();}
3. Write the front-end page and introduce CSS and JS related to uploadify.
<% @ Page Language = "Java" pageencoding = "UTF-8" %> <% string Path = request. getcontextpath (); string basepath = request. getscheme () + ": //" + request. getservername () + ":" + request. getserverport () + path + "/"; %> <! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml">4. on the final test page, you must note that the upload path cannot have permission control, because uploadify will lose the session and cause the backend verification permission to fail, we recommend that you create a path without permission and upload it to the regular path.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
