jquery implementation ajaxfileupload asynchronous upload plug-in tutorial-JS Tutorial-php.cn

This article mainly introduces the jquery ajaxfileupload asynchronous upload plug-in in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

The server uses struts2 to handle file uploads.

Required environment:
jquery.js
ajaxfileupload.js
jar package that struts2 depends on
and struts2-json-plugin-2.1.8.1.jar

Write the Action for file upload

package com.ajaxfile.action; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import org.apache.struts2.ServletActionContext; import com.opensymphony.xwork2.ActionSupport; @SuppressWarnings("serial") public class FileAction extends ActionSupport { private File file; private String fileFileName; private String fileFileContentType; private String message = "你已成功上传文件"; public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } public File getFile() { return file; } public void setFile(File file) { this.file = file; } public String getFileFileName() { return fileFileName; } public void setFileFileName(String fileFileName) { this.fileFileName = fileFileName; } public String getFileFileContentType() { return fileFileContentType; } public void setFileFileContentType(String fileFileContentType) { this.fileFileContentType = fileFileContentType; } @SuppressWarnings("deprecation") @Override public String execute() throws Exception { String path = ServletActionContext.getRequest().getRealPath("/upload"); try { File f = this.getFile(); if(this.getFileFileName().endsWith(".exe")){ message="对不起,你上传的文件格式不允许!!!"; return ERROR; } FileInputStream inputStream = new FileInputStream(f); FileOutputStream outputStream = new FileOutputStream(path + "/"+ this.getFileFileName()); byte[] buf = new byte[1024]; int length = 0; while ((length = inputStream.read(buf)) != -1) { outputStream.write(buf, 0, length); } inputStream.close(); outputStream.flush(); } catch (Exception e) { e.printStackTrace(); message = "对不起,文件上传失败了!!!!"; } return SUCCESS; } }

Copy after login

struts.xml

       text/html     text/html

Copy after login

Pay attention to the configuration of result in struts.xml combined with Action.

The contentType parameter must be present, otherwise the browser will always prompt to save the returned JSON result as a file and will not hand it over to ajaxfileupload for processing. This is because the default contentType of struts2 JSON Plugin is application/json, while ajaxfileupload requires text/html.

JSP page for file upload

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>     Insert title here

Copy after login

##Pay attention to theThe code does not have a form. The ajaxFileUpload() method is only triggered when the button is clicked. What needs to be noted is the order in which js files are introduced. ajaxfileupload.js depends on jquery, so you know.

Related recommendations:

jquery implements enter login details and example code

Jquery implements form verification, all verifications pass You can submit

php+jquery to implement the search prompt function example

The above is the detailed content of jquery implementation ajaxfileupload asynchronous upload plug-in tutorial. For more information, please follow other related articles on the PHP Chinese website!