uploadify多图片上传（html5版本）

来源：互联网发布：东宫番外之清风知我意编辑：程序博客网时间：2024/05/21 10:49

最近在做公司后台，关于项目发布的功能，需求中有多个图片上传的功能。
故查询资料，开发整理如下(之前发过一版flash的，现在将html5整理如下，与之前那篇的差别就是插件参数的不同）。
说明一下：在官网html5版本，是要收费的。

首先下载相关的外部文件（js，css等）以及案例。
1、地址：
付费：http://www.uploadify.com/download/
不付费：自己找，我是从http://www.cnblogs.com/lvdabao/p/3452858.html 这位朋友这里下载的。
2、下载之后有用的文件如图：
可以开始在你的项目里进行开发了~~~~
将必须的文件js,css放入到程序中，位置按照各自的习惯来。
在页面中引用外部文件如图：
摘取页面部分代码如下：

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"  />    <title>~~~~~</title>    <script type="text/javascript" src="../../js/jquery.min.js"></script>    <link rel="stylesheet"  type="text/css" href="../../css/uploadify.css" />      <script type="text/javascript" src="../../js/swfobject.js"></script>      <script type="text/javascript" src="../../js/jquery.uploadify.min.js"></script>  <%        request.setCharacterEncoding("utf-8");        String path = request.getContextPath();        String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;%></head><body>  <form class="form" action="" method="post">        <div id="normalHousePublicPart">                <label>                        <span class="search-span">公司基础信息(*必选)：</span>                         <input type="hidden" class="simple" id="companyBaseInfo" name="companyBaseInfo"/>                </label>                 <div class="uploadBox">                        <div id="uploadfileQueue1" style="padding: 3px;"></div>                        <div id="file_upload1"></div>                        <input type="button" value="上传" onclick="doUpload1()" class="uploadBtn" />                        <input type="button" value="删除重传公司基础信息" onclick="deleteCompanyInfo1()" class="uploadBtn" />                        <div id="mypic1" class="uploadImg"></div>                 </div>    </form>    <script type="text/javascript">        $(function () {              $('#file_upload1').uploadifive({            //开启调试               'debug': true ,           'auto'             : false,           'buttonText': '选择照片',             'formData'         : null,           'queueSizeLimit': 5,               //文件选择后的容器ID               'queueID'          : 'uploadfileQueue1',           'fileObjName':'pic',           'uploadScript'     : '/manage.onigiri/uploadTestAction/uploadFile',           'width': '75',             'height': '24',           'multi': true,             'fileType':'image/*',           'fileSizeLimit':'1MB',           'removeCompleted':'true',           'onUploadComplete' : function(file, data) {              $("#mypic1").append("<div><img name='companyInfoImg' src="+data+" /><span onclick='deleteThisImg(this)'>删除</span></div>");            }        });          });             //开始上传                function doUpload1() {                    $('#file_upload1').uploadifive('upload');              }           //删除重传          function deleteCompanyInfo1() {                $("#mypic1").html("");          }            //删除单张          function deleteThisImg(obj){              $(obj).parent("div").remove();          }    </script></body></html>

上面是页面中的处理，下面来看一下action中的后台处理。

5.Action中的处理
其中 “CommonsMultipartFile “必须设置注释与页面中配置的“fileObjName”一致。

/***************************************** *  *@copyright  隐藏~~啦啦 * * *****************************************/package com.iqb.onigiri.manage.action;import java.util.UUID;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.slf4j.Logger;import org.slf4j.LoggerFactory;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.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.multipart.commons.CommonsMultipartFile;import com.iqb.onigiri.manage.base.BaseAction;import com.iqb.onigiri.manage.base.BaseConfig;import com.iqb.onigiri.manage.util.SpringBeanUtil;/** *  * Description:  * @author William * @version 1.0 * <pre> * Modification History:  * Date         Author      Version     Description ------------------------------------------------------------------ * 2017年6月8日    William     1.0        1.0 Version  * </pre> */@Controller@RequestMapping("/uploadTestAction")public class UploadTestAction extends BaseAction{    /**     * 日志类     */    private static Logger log = LoggerFactory.getLogger(UploadTestAction.class);    private BaseConfig baseConfig; //此处是配置类    public UploadTestAction () {        baseConfig = SpringBeanUtil.getBean(BaseConfig.class);//构造方法，加载BaseConfig类    }    /**     *      * Description:      * @param     * @return String     * @throws     * @Author William     * Create Date: 2017年6月8日     */    @ResponseBody    @RequestMapping(value="/uploadFile",method=RequestMethod.POST, produces = "text/plain;charset=UTF-8")    public String uploadFile(@RequestParam("pic")CommonsMultipartFile pic  ,HttpServletRequest request,HttpServletResponse response) throws Exception{        //设置文件保存的本地路径        String filePath=baseConfig.getUploadStaticUrl()+"/static/uploadFiles/";        String fileName = pic.getOriginalFilename();//上传文件的原始名称        //为了避免文件名重复，在文件名前加UUID        String uuid = UUID.randomUUID().toString().replace("-","");        String uuidFileName = uuid + fileName; //上传文件的新名称        /**         * 实际的文件到服务器的类         */        UploadAction upa = new UploadAction();        upa.sendMultiFile(pic.getInputStream(), filePath +uuidFileName);        log.debug("文件名称：{}",filePath+uuidFileName);        return filePath+uuidFileName; //此处要返回给前端页面，作为存储使用    }}

上面的代码调用了“UploadAction.java”,这个类的作用就是上传文件到服务器。

6. UploadAction.Java 代码如下:

public void sendMultiFile(InputStream is,String urlStr) throws MalformedURLException {        URL url = new URL(urlStr);        try {            urlconnection = url.openConnection();            urlconnection.setDoOutput(true);            urlconnection.setDoInput(true);            if (urlconnection instanceof HttpURLConnection) {                try {                    ((HttpURLConnection) urlconnection).setRequestMethod("PUT");                    ((HttpURLConnection) urlconnection).setRequestProperty(                            "Connection", "Keep-Alive");                    ((HttpURLConnection) urlconnection).setRequestProperty(                            "Cache-Control", "no-cache");                    ((HttpURLConnection) urlconnection).setRequestProperty(                            "Content-type", "text/plain");                    ((HttpURLConnection) urlconnection).connect();                } catch (ProtocolException e) {                    e.printStackTrace();                }                BufferedOutputStream out = new BufferedOutputStream(                        urlconnection.getOutputStream());                out.flush();                BufferedInputStream in = new BufferedInputStream(is);                try {                    byte[] buffer = new byte[1024];                    int len = 0;                    while ((len = in.read(buffer)) > -1)                        out.write(buffer, 0, len);                } finally {                    out.close();                    in.close();                }                try {//                  System.out.println("here");                    InputStream inputStream;                    int responseCode = ((HttpURLConnection) urlconnection)                            .getResponseCode();//                  System.out.println("responseCode:"+responseCode);                    if ((responseCode >= 200) && (responseCode <= 202)) {//                      System.out.println("成功");                    } else {                        inputStream = ((HttpURLConnection) urlconnection)                                .getErrorStream();                    }                    ((HttpURLConnection) urlconnection).disconnect();                } catch (IOException e) {                    e.printStackTrace();                }            }        } catch (Exception e) {        }    }

以上一系列代码完成，即可成功上传文件，贴图。

成功的图，与flash版本无差别，此处不贴了。

此贴内容到此为止,如看到此贴的朋友，有建议可随意留言，勿喷，谢谢。

阅读全文

0 0