百度webuploader实现图片上传

由于业务需求，要将图片上传到服务器，所以用了百度的webuploader。

webuploader主要用于js页面前台实现，不关注后台，后台还要自己写。

前台页面upImage.jsp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head>

<title>myUploader</title>

</head>

</div>

</div><div class="info"></div>

</div>

</script>

</body>

</html>

主要要引进4个JS页面和2个css页面

调用连接的配置主要是在

upload.js里面的WebUploader.create里面，如下：

//读取当前系统的路径例如本地的话就是http://localhost:8080

var basePath=window.location.protocol+ "//"+window.location.host;

// 实例化

uploader = WebUploader.create({

pick: {

id: '#filePicker',

label: '点击选择文件'

formData: {

uid: 123

dnd: '#dndArea',

paste: '#uploader',

swf: '../js/Uploader.swf',

chunked: true,

chunkSize: 512 * 1024,

//调用的链接主要在这里配置

server: basePath+'/SunImageUpload/UpImage/upload1.do',

//server: 'http://localhost:8080/SunImageUpload/UpImage/upload1.do',

method:'POST',

// runtimeOrder: 'flash',

// accept: {

// title: 'Images',

// extensions: 'gif,jpg,jpeg,bmp,png',

// mimeTypes: 'image/*'

// },

// 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。

disableGlobalDnd: true,

fileNumLimit: 300,

fileSizeLimit: 2000 * 1024 * 1024, // 200 M

fileSingleSizeLimit: 500 * 1024 * 1024 // 50 M

});

后台接受java文件UpImageController.java如下

package com.sunyard.insurance.controller;

import java.io.File;

import java.io.FileOutputStream;

import java.util.List;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.commons.io.FileUtils;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

import org.springframework.web.bind.annotation.ResponseBody;

import org.apache.commons.fileupload.FileItem;

import org.apache.commons.fileupload.FileItemFactory;

import org.apache.commons.fileupload.disk.DiskFileItemFactory;

import org.apache.commons.fileupload.servlet.ServletFileUpload;

import org.apache.commons.lang3.math.NumberUtils;

@Controller

@RequestMapping("/UpImage")

public class UpImageController {

@SuppressWarnings("unchecked")

@RequestMapping(value = "/upload", method = { RequestMethod.POST,RequestMethod.GET })

@ResponseBody

public void upload(HttpServletRequest request, HttpServletResponse response) throws Exception{

try {

boolean isMultipart = ServletFileUpload.isMultipartContent(request);

if (isMultipart) {

FileItemFactory factory = new DiskFileItemFactory();

ServletFileUpload upload = new ServletFileUpload(factory);

// 得到所有的表单域，它们目前都被当作FileItem

List<FileItem> fileItems = upload.parseRequest(request);

String id = "";

String fileName = "";

// 如果大于1说明是分片处理

int chunks = 1;

int chunk = 0;

FileItem tempFileItem = null;

for (FileItem fileItem : fileItems) {

if (fileItem.getFieldName().equals("id")) {

id = fileItem.getString();

} else if (fileItem.getFieldName().equals("name")) {

fileName = new String(fileItem.getString().getBytes("ISO-8859-1"), "UTF-8");

} else if (fileItem.getFieldName().equals("chunks")) {

chunks = NumberUtils.toInt(fileItem.getString());

} else if (fileItem.getFieldName().equals("chunk")) {

chunk = NumberUtils.toInt(fileItem.getString());

} else if (fileItem.getFieldName().equals("file")) {

tempFileItem = fileItem;

}

// 临时目录用来存放所有分片文件

String tempFileDir = getTempFilePath() + File.separator + id;

File parentFileDir = new File(tempFileDir);

if (!parentFileDir.exists()) {

parentFileDir.mkdirs();

}

// 分片处理时，前台会多次调用上传接口，每次都会上传文件的一部分到后台(默认每片为5M)

File tempPartFile = new File(parentFileDir, fileName + "_" + chunk+ ".part");

FileUtils.copyInputStreamToFile(tempFileItem.getInputStream(),

tempPartFile);

// 是否全部上传完成

// 所有分片都存在才说明整个文件上传完成

boolean uploadDone = true;

for (int i = 0; i < chunks; i++) {

File partFile = new File(parentFileDir, fileName + "_" + i

+ ".part");

if (!partFile.exists()) {

uploadDone = false;

}

// 所有分片文件都上传完成

// 将所有分片文件合并到一个文件中

if (uploadDone) {

File destTempFile = new File(getTempFilePath(), fileName);

for (int i = 0; i < chunks; i++) {

File partFile = new File(parentFileDir, fileName + "_"

+ i + ".part");

FileOutputStream destTempfos = new FileOutputStream(destTempFile, true);

FileUtils.copyFile(partFile, destTempfos);

destTempfos.close();

}

// 得到 destTempFile 就是最终的文件

// 添加到文件系统或者存储中

// 删除临时目录中的分片文件

//FileUtils.deleteDirectory(parentFileDir);

// 删除临时文件

//destTempFile.delete();

} else {

// 临时文件创建失败

if (chunk == chunks -1) {

FileUtils.deleteDirectory(parentFileDir);

}

} catch (Exception e) {

e.printStackTrace();

}

@SuppressWarnings("unchecked")

@RequestMapping(value = "/upload1", method = { RequestMethod.POST,RequestMethod.GET })

@ResponseBody

public void upload1(HttpServletRequest request, HttpServletResponse response) throws Exception{

try {

boolean isMultipart = ServletFileUpload.isMultipartContent(request);

if (isMultipart) {

FileItemFactory factory = new DiskFileItemFactory();

ServletFileUpload upload = new ServletFileUpload(factory);

// 得到所有的表单域，它们目前都被当作FileItem

List<FileItem> fileItems = upload.parseRequest(request);

String fileName = "";

FileItem tempFileItem = null;

for (FileItem fileItem : fileItems) {

if (fileItem.getFieldName().equals("name")) {

fileName = new String(fileItem.getString().getBytes("ISO-8859-1"), "UTF-8");

} else if (fileItem.getFieldName().equals("file")) {

tempFileItem = fileItem;

}

File destTempFile = new File(getTempFilePath(), fileName);

FileUtils.copyInputStreamToFile(tempFileItem.getInputStream(),

destTempFile);

}

} catch (Exception e) {

e.printStackTrace();

}

private String getTempFilePath() {

// TODO Auto-generated method stub

return "/Applications/yhb/123";

}

其中upload方法是分段读取，如一个图片文件过大，可以分段读取，一次读取5M

upload1方法是直接传输。

注：如果传多张图片，则会多次调用upload1方法，比如前台传输两张图片，upload1方法就会调用两次

上传之后保存路径在getTempFilePath方法里面配置

由于是maven文件，jar包直接在pom.xml里面配置

<groupId>commons-fileupload</groupId>

<artifactId>commons-fileupload</artifactId>

</dependency>

<groupId>commons-io</groupId>

<artifactId>commons-io</artifactId>

</dependency>

<groupId>commons-collections</groupId>

<artifactId>commons-collections</artifactId>

</dependency>

<groupId>org.apache.commons</groupId>

<artifactId>commons-lang3</artifactId>

</dependency>

百度webuploader实现图片上传

猜你喜欢