异步上传文件插件-ajaxfileupload.js简单例子

来源：互联网发布：在淘宝网上开店步骤编辑：程序博客网时间：2024/06/03 17:59

首先在JSP页面定义上传按钮,定义name以及id

<input type="file" name="fileName" id="fileId" />

然后定义JS事件

<pre class="javascript" name="code">$("#fileId").live("change", function() {    $.ajaxFileUpload( {                url: "/image/ajaxUpolad,//你的url地址                 secureuri: true,                fileElementId: "fileId",//file的id                 dataType: "content",//看具体情况                 success: function(data) {              alert("---" + data);//测试        }                   })});

后台代码：（SpringMVC)

controller：（写的比较简单，没有进行异常处理等）

<pre class="java" name="code">package com.boil.rx.core.image.controller;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.multipart.MultipartFile;import com.boil.rx.core.image.service.SaveImageService;@Controllerpublic class AjaxUploadImageController {@Autowiredprivate SaveImageService saveImageService;@ResponseBody@RequestMapping(value = "/image/ajaxUpload")public String upload(final MultipartFile multipartFile, final Long nodeId) {try {return saveImageService.createImageOnDisk(multipartFile, nodeId);} catch (final Exception e) {e.printStackTrace();return "";}}}

service:

<pre class="java" name="code">package com.boil.rx.core.image.service;import java.io.File;import java.text.SimpleDateFormat;import java.util.Map;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;import org.springframework.util.FileCopyUtils;import org.springframework.web.multipart.MultipartFile;import org.springframework.web.multipart.MultipartHttpServletRequest;import com.boil.rx.core.image.domain.Image;import com.boil.rx.core.image.imageobjectservice.ImageObjectService;import com.boil.rx.core.util.Dom4jUtil;@Servicepublic class SaveImageService {@Autowiredprivate ImageObjectService imageObjectService;private static final String XMLPATH = "/install.xml";private static final String COVER_PATH = "/uploadImage/";private static final String STATIC_PATH = "staticPath";/** * 在硬盘上创建图片 * @param multipartFile：图片文件 * @param nodeId：节点Id * @return：图片的相对路径 * @throws Exception */public String createImageOnDisk(final MultipartFile multipartFile, final Long nodeId) throws Exception {final String name = multipartFile.getOriginalFilename().replace(" ", "");this.createImageOnDisk(multipartFile, nodeId, name);return COVER_PATH + nodeId + "/" + name;}/** * 在硬盘上传见图片文件 * @param multipartFile * @param imageId：图片节点id * @param name：图片名称 * @throws Exception */private void createImageOnDisk(final MultipartFile multipartFile, final Long imageId, final String name) throws Exception {final String rootPath = Dom4jUtil.getMessageValue(STATIC_PATH, XMLPATH);final String folder = rootPath + COVER_PATH + imageId;final File file = new File(folder);if (!file.exists()) {file.mkdirs();}final File uploadFile = new File(folder + "/" + name);

FileCopyUtils.copy(multipartFile.getBytes(), uploadFile);}}<span style="background-color: rgb(255, 255, 255); font-family: Arial, Helvetica, sans-serif;"> </span>

0 0