上传图片插件之---uploadify-蒲公英云

有关uploadify的API：http://www.mamicode.com/info-detail-506696.html

这里主要介绍的是该上传图片前端代码编写，后台如何上传至资源服务器就没有介绍了，链接

该方法已经经过封装，在上传过程中，会显示进度条(这些都是可以设置的),上传成功之后，会显示一个缩略图，点击提交则会弹出所有图片在资源服务器的url，一边后续业务把该路径存储到数据库

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> 
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
     href="${pageContext.request.contextPath}/uploadify/main.css" rel="stylesheet">
     rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/uploadify/uploadify.css"  />
    <script src="${pageContext.request.contextPath}/uploadify/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/uploadify/jquery.uploadify-3.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/uploadify/common_upload.js?v=20170806"></script>
uploadify上传图片
    <script type="text/javascript">
      var ctx = "${pageContext.request.contextPath}";
      var index=0;
    </script>
    订单附件 订单附件 x 支持jpg,gif,png,bmp格式图片
$(function(){
        $("#imageUpload1").uploadify({
            //指定swf文件
            'swf': ctx+'/uploadify/uploadify.swf',
            //后台处理的页面
            'uploader': ctx+'/do/uploadControl/upload',
            //按钮显示的文字
            'buttonText': '上传图片',
            //显示的高度和宽度，默认 height 30；width 120
            //'height': 15,
            //'width': 80,
            //上传文件的类型  默认为所有文件    'All Files'  ;  '*.*'
            //在浏览窗口底部的文件类型下拉菜单中显示的文本
            'fileTypeDesc': 'Image Files',
            //设置一个名字，在服务器处理程序中根据该名字来取上传文件的数据(后台方法接收参数名)
            'fileObjName':'file',
            //允许上传的文件后缀
            'fileTypeExts': '*.gif; *.jpg; *.png',
            //发送给后台的其他参数通过formData指定
            //'formData': { 'someKey': 'someValue', 'someOtherKey': 1 },
            //上传文件页面中，你想要用来作为文件队列的元素的id, 默认为false  自动生成,  不带#
            //'queueID': 'fileQueue',
            //选择文件后自动上传
            'auto': true,
            //设置为true将允许多文件上传
            'multi': true,
            'onUploadSuccess' : function(file, data, response){
                var resp = eval('(' + data + ')');
                var fileUrl=resp.fileUrl;
                index+=1;
                if(index> 1){
                    $("#imageShow").append("x");
                }
                assignImageValue(fileUrl);
            }
        });
    });
//检查已经上传商品图片个数
 function checkImages(){
     var imgObj = $("#imageShow").find("span img");
     if(imgObj.size()==5){
         alert("最多可上传5张商品图片");
         return false;
     }else{
         return true;
     }
 }
 //显示已上传图片
 function assignImageValue(fileUrl){
     var imgObj = $("#imageShow").find("span");
     imgObj.each(function(i){
         var img1 = $(this).find("img");
         if(img1.size()==0){
             $(this).attr("currentHtml",$(this).html());
             $(this).text("");
             //判断当前是第几个data-index图片
             var index = $(this).attr("data-index");
                 $(this).append('x');
             return false;
         }else{
             return true;//进入下次循环
         }
     });
 }
 //删除页面图片
 function delImg(data){
     var currentHtml = $(data).parent().attr("currentHtml");
     var num = $(data).parent().attr("data-index");
     $(data).parent().empty();
     var lng=$("#imageShow").find("span").length;
     if(index>1){
          $("#imageShow").find("span[data-index='"+num+"']").remove();
     }
     index=index-1;
 }
//编辑后提交
    function confimOrderAudit(){
        var mainPicUrls="";
        $("input[id='mainPicUrl']").each(function(i) {
            mainPicUrls+=$(this).val()+",";
        });
        alert(mainPicUrls)
        }
package com.cn.control.upload;
import java.io.IOException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
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.RequestParam;
import org.springframework.web.multipart.MultipartFile;
import com.cn.service.upload.UploadService;
/** * @author  feifz: 
    * @date ：2017年8月9日 上午10:08:35 
    * @return  
    * @desc
    */
@Controller
@RequestMapping("uploadControl")
public class UploadControl {
    @Autowired
    private UploadService uploadService;
    @RequestMapping("/upload")
    public void upload(HttpServletRequest request ,HttpServletResponse response,@RequestParam(value = "file", required = false) MultipartFile file) throws IOException{
        uploadService.uploadPic(request, response, file);
    }
}
package com.cn.service.upload;
import java.io.IOException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.simple.JSONObject;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;
import com.cn.util.SystemConstants;
import com.cn.util.UploadAction;
import com.cn.util.WebUploadFile;
/** * @author  feifz: 
    * @date ：2017年8月9日 上午10:10:49 
    * @return  
    * @desc
    */
@Service
public class UploadService {
    /**
     * 上传图片
     * @param request
     * @param response
     * @param file
     * @throws IOException 
     */
    public void uploadPic(HttpServletRequest request ,HttpServletResponse response,MultipartFile file) throws IOException{
        String filePath = "";//用来保存上传图片之后的路径 各路径间用逗号隔开
        //下面这个方法为上传图片到资源服务器处理逻辑，输入图片，输出该图片上传至资源服务器的url
        WebUploadFile webUploadFile = UploadAction.uploadSFTP(request, file);
        filePath = filePath+webUploadFile.getFilePath();
        JSONObject obj = new JSONObject();
        obj.put("error", 0);
        obj.put("fileUrl", SystemConstants.SFTP_httpUploadBaseUrl+filePath);
        response.getWriter().print(obj.toJSONString());
    }
}