"JSP" using Ajaxfileuploader and Jspsmartupload to complete the Ajax file upload system without flushing

Source: Internet
Author: User

This does not refresh the Ajax file upload system can also be used to do a preview map

Although the preview can be completed by not uploading images, but does not refresh the Ajax file upload system can do upload images immediately return the results of uploading results to the user

A simple file upload system was completed in the article "JSP" using Jspsmartupload to complete a simple File upload system (click the Open link).

But this file upload system is too traditional,

After uploading the file, you need to jump to another page to submit the form, process the form, and then provide a "back" button to the user

If the user requests to upload, immediately see the picture, and do not jump, had to use AJAX technology to achieve,

But the Ajax technology introduced in the article "JSP" Jqueryajax technology in JSP and regular expressions in JavaScript (click to open link) can only transfer normal form text.

So what if you want Ajax technology in your JSP to be able to transfer files?

This is the time to use the Ajaxfileuploader control to support the transfer of files in Ajax


I. BASIC OBJECTIVES

Be able to upload images in a Web page, and display the results of the upload,


On the left side of the graph is my Tomcat folder, and the right side of the graph is my page.

If the upload is non-file, then the Pop-up dialog box to refuse



Second, the production process

1, first of all to configure the Jspsmartupload and Ajaxfileuploader,jspsmartupload in the "JSP" using Jspsmartupload to complete a simple File upload system (click to open the link) in the article said, Actually is a jar package, no longer repeat, Ajaxfileuploader can go to the official website (click Open link) in the download, I also sent a copy (click the Open link), and then create a new project in Eclipse, put Jspsmartupload.jar into ... \webroot\web-inf\lib, Ajaxfileuploader is a compressed package, extracted to Ajaxfileuploader as follows:


Copy the Ajaxfileupload.js and Jquery.js inside the project directory, it is best to create a new folder, such as Webroot\js, and then create a new Pic folder with the project directory to hold the uploaded image, the entire directory structure such as:


One of the index.jsp is the system comes with, by the author Black upload.jsp and this project is irrelevant


2, uploadsuc.jsp

This file has nothing to say, the principle and "Jsp" using Jspsmartupload to complete a simple File upload system (click the Open link) in the article, the following is its code:

<!--Note how the first two packages are referenced by--><%@ page language= "java" import= "java.util.*,com.jspsmart.upload.*" pageencoding= " Utf-8 "%><! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >

3, fileupload.jsp

<%@ page language= "java" import= "java.util.*" pageencoding= "UTF-8"%><! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
Third, remarks

At this point, a simple Ajax file upload system is complete, some Tomcat may not support Chinese links, resulting in the image upload can not be successfully displayed,

At this point, you should open the Tomcat directory, such as apache-tomcat-6.0.43\conf\ under the Server.xml, open with Notepad, find connector port= "8080" protocol= "http/1.1" that line, Plus uriencoding= "UTF-8",


"JSP" using Ajaxfileuploader and Jspsmartupload to complete the Ajax file upload system without flushing

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.