Ajax submission of forms with file upload and hidden iframe application

Time:2021-10-23

General forms are submitted through Ajax, so it is more troublesome to encounter forms with file upload. The basic principle is to add a hidden iframe on the page, and then submit the form data other than the file through Ajax. In the callback function after the form data is submitted successfully, the file is submitted separately through the form, and the target of the form of the submitted file points to the aforementioned hidden iframe.

HTML code

Copy codeThe code is as follows:
<html>
<body>
<form action=”upload.jsp” name=”form1″encType=”multipart/form-data” method=”post”target=”hidden_frame”>
<inputtype=”file” name=”file”style=”width:450″>
< inputtype = “submit” value = “upload file” > < spanid = “MSG” ></span>
<br>
< fontcolor = “red” > supports uploading of JPG, JPEG, GIF, BMP, SWF, RMVB, RM and avi files < / font >
<iframe name=’hidden_frame’style=’display:none’></iframe>
</form>
</body>
</html>
<scripttype=”text/javascript”>
functioncallback(msg)
{
document.getElementByIdx_x_x(“file”).outerHTML =document.getElementByIdx_x_x(“file”).outerHTML;
document.getElementByIdx_x_x(“msg”).innerHTML = “<fontcolor=red>”+msg+”</font>”;
}
</script>

The main thing to do in index.html is to write a form and iframe, and set the target of the form as the name of the iframe. Note that the iframe should be set as invisible, and the others are written in the normal way of file upload. In this way, the refreshed page is the hidden iframe, and there will be no page refresh in index.html. The callback method of JS is the callback method. It is used to clear the file upload box and display background information,Note that the method of emptying the file upload box is a little different from the ordinary method

Upload.jsp9dhjsp code

Copy codeThe code is as follows:
<%@ page language=”java” contentType=”text/html; charset=gb2312″%>
<%@ pageimport=”com.jspsmart.upload.SmartUpload”%>
<%
//Create a new SmartUpload object
SmartUploadsu = newSmartUpload();
//Upload initialization
su.initialize(pageContext);
//Set upload limit
//1. Limit the maximum length of each uploaded file.
su.setMaxFileSize(10000000);
//2. Limit the length of total uploaded data.
su.setTotalMaxFileSize(20000000);
//3. Set the files allowed to upload (limited by extension), and only doc and txt files are allowed.
su.setAllowedFilesList(“doc,txt,jpg,rar,mid,waw,mp3,gif”);
boolean sign= true;
//4. Set the file that cannot be uploaded (restricted by extension), and prohibit uploading files with exe, bat, JSP, HTM, HTML extensions and files without extensions.
try{
su.setDeniedFilesList(“exe,bat,jsp,htm,html”);
//Upload file
su.upload();
//Save the uploaded file to the specified directory
su.save(“c://”);
} catch(Exception e) {
e.printStackTrace();
sign = false;
}
if(sign==true)
{
out.println(“<script>parent.callback(‘upload filesuccess’)</script>”);
}else
{
out.println(“<script>parent.callback(‘uploadfileerror’)</script>”);
}
%>

In upload.jsp, just pay attention to the format of the final output. In fact, the principle is to output a piece of JS code to iframe, and then control its parent page in iframe.

OK, so far, a page upload component without refresh is ready. Don’t forget to add the necessary JSP smartupload.jar package under WEB-INF / lib.

It should be noted that if you upload using iframe, the status bar will still be refreshed, because the pages in iframe are refreshed, but the external pages, that is, the pages you see, are not refreshed, so it can also be said to be similar to Ajax upload

Recommended Today

OC basis

IOS development interview essential skills chart.png What are objects and what are the objects in OC? An object is an instance of a class; Is an instance created through a class, which is generally called an instance object; Common objects in OC include instance objects, class objects, and metaclass objects; What is a class? What […]