zoukankan html css js c++ java

Uploadify文件上传

一、简介

　　Uploadify 是一种基于html5 或 flash的多文件上传的jQuery插件。Uploadify可以支持多种定制。它是一种异步的文件上传插件。下载网站为http://www.uploadify.com/。这里使用的是Uploadify Version 3.2.1版本。下载解压后，目录如下所示：

　　使用Uploadify需要加入如下js

<script src="jquery1.10.2 .min.js" type="text/javascript"></script> <!-- 这里jquery 版本问1.10.2 -->
<script src="jquery.uploadify.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="uploadify.css"> <!-- 样式文件 -->

二、示例

　　网页示例如下：

  1 <%@ page contentType="text/html; charset=UTF-8"%>
  2 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 
  3 <c:set var="ctx" value="${pageContext.request.contextPath}" />
  4 <!DOCTYPE HTML>
  5 <html>
  6 <head>
  7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  8 <title>UploadiFive Test</title>
  9 <script src="${ctx}/index/uploadify/jquery1.10.2 .min.js" type="text/javascript"></script>
 10 <script src="${ctx}/index/uploadify/jquery.uploadify.min.js" type="text/javascript"></script>
 11 <style type="text/css">
 12 body {
 13     font: 13px Arial, Helvetica, Sans-serif;
 14 }
 15 .uploadify {
 16     position: relative;
 17     margin-bottom: 1em;
 18 }
 19 .uploadify-button {
 20     background-color: #505050;
 21     background-image: linear-gradient(bottom, #505050 0%, #707070 100%);
 22     background-image: -o-linear-gradient(bottom, #505050 0%, #707070 100%);
 23     background-image: -moz-linear-gradient(bottom, #505050 0%, #707070 100%);
 24     background-image: -webkit-linear-gradient(bottom, #505050 0%, #707070 100%);
 25     background-image: -ms-linear-gradient(bottom, #505050 0%, #707070 100%);
 26     background-image: -webkit-gradient(
 27         linear,
 28         left bottom,
 29         left top,
 30         color-stop(0, #505050),
 31         color-stop(1, #707070)
 32     );
 33     background-position: center top;
 34     background-repeat: no-repeat;
 35     -webkit-border-radius: 30px;
 36     -moz-border-radius: 30px;
 37     border-radius: 30px;
 38     border: 2px solid #808080;
 39     color: #FFF;
 40     font: bold 12px Arial, Helvetica, sans-serif;
 41     text-align: center;
 42     text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
 43     width: 100%;
 44 }
 45 .uploadify:hover .uploadify-button {
 46     background-color: #606060;
 47     background-image: linear-gradient(top, #606060 0%, #808080 100%);
 48     background-image: -o-linear-gradient(top, #606060 0%, #808080 100%);
 49     background-image: -moz-linear-gradient(top, #606060 0%, #808080 100%);
 50     background-image: -webkit-linear-gradient(top, #606060 0%, #808080 100%);
 51     background-image: -ms-linear-gradient(top, #606060 0%, #808080 100%);
 52     background-image: -webkit-gradient(
 53         linear,
 54         left bottom,
 55         left top,
 56         color-stop(0, #606060),
 57         color-stop(1, #808080)
 58     );
 59     background-position: center bottom;
 60 }
 61 .uploadify-button.disabled {
 62     background-color: #D0D0D0;
 63     color: #808080;
 64 }
 65 .uploadify-queue {
 66     margin-bottom: 1em;
 67 }
 68 .uploadify-queue-item {
 69     background-color: #F5F5F5;
 70     -webkit-border-radius: 3px;
 71     -moz-border-radius: 3px;
 72     border-radius: 3px;
 73     font: 11px Verdana, Geneva, sans-serif;
 74     margin-top: 5px;
 75     max-width: 350px;
 76     padding: 10px;
 77 }
 78 .uploadify-error {
 79     background-color: #FDE5DD !important;
 80 }
 81 .uploadify-queue-item .cancel a {
 82     background: url('../uploadify/uploadify-cancel.png') 0 0 no-repeat;
 83     float: right;
 84     height:    16px;
 85     text-indent: -9999px;
 86     width: 16px;
 87 }
 88 .uploadify-queue-item.completed {
 89     background-color: #E5E5E5;
 90 }
 91 .uploadify-progress {
 92     background-color: #E5E5E5;
 93     margin-top: 10px;
 94     width: 100%;
 95 }
 96 .uploadify-progress-bar {
 97     background-color: #0099FF;
 98     height: 3px;
 99     width: 1px;
100 }
101 </style>
102 </head>
103 
104 <body>
105     <h1>Uploadify Demo</h1>
106     <form>
107         <div id="queue"></div>
108         <input id="file_upload" name="file_upload" type="file" multiple="true">
109         <input type="button" value="开始上传" onclick="startupload();" />
110     </form>
111 
112 <script type="text/javascript">
113 var upload;
114 $(function() {
115     upload = $('#file_upload').uploadify({
116         'auto'     : false,
117         'fileTypeDesc' : '图片文件',
118         'fileTypeExts' : '*.gif; *.jpg; *.png',
119         'buttonText' : '选择文件...',
120         'width'    : 300,
121         'multi': true,
122         'formData'     : {
123             'timestamp' : 'ddd',
124             'token'     : '/sdf/fdsfs'
125         },
126         'fileDataName' : 'Filename',//与后端获取文件的名称一致
127         'cancelImg'      : 'images/cancel.png',  
128         'method'   : 'post',
129         'swf'      : '${ctx}/index/uploadify/uploadify.swf',
130         'uploader' : '${ctx}/control/file/upload.action',
131         'button_image_url':'${ctx}/index/uploadify/', //'overrideEvents' : ['onSelectError', 'onDialogClose'],重写事件，从而自定义错误消息显示
132         'requeueErrors' : true,
133         'onSelectError' : function() {
134             alert('请选择图片文件');
135             return false;
136         },
137         'onSelect' : function(file) {
138             console.log('The file ' + file.name + ' was added to the queue.');
139         },
140         'onUploadStart' : function(file) {
141             console.log('开始上传: ' + file.name);
142         },
143         'onUploadComplete' : function(file) {
144             console.log('文件 ' + file.name + ' 上传成功');
145         },
146         'onUploadSuccess' : function(file, data, response) {
147             console.log('文件 ' + file.name + ' 上传成功  相应数据为: ' + response + ':' + data);
148             if(data){
149                 alert("上传成功!");
150             }else{
151                 alert("上传失败，请重新上传！");
152             }
153         }
154     });
155 });
156 
157 function startupload(){
158     upload.uploadify('upload','*');
159 }
160 </script>
161 </body>
162 </html>

　　下载地址：点击下载。

　　后端处理代码如下：

package com.test.web.test;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.UnsupportedEncodingException;
import java.util.Calendar;
import java.util.Date;

import javax.servlet.http.HttpServletRequest;

import org.apache.commons.io.IOUtils;
import org.springframework.context.annotation.Scope;
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.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

@Controller
@Scope("prototype")
@RequestMapping("/control/file")
public class FileUpload {

    @RequestMapping(value = "upload", method = RequestMethod.POST)
    @ResponseBody
    public boolean test(HttpServletRequest request) throws UnsupportedEncodingException {
        String path = request.getSession().getServletContext().getRealPath("");
        Calendar calendar = Calendar.getInstance();
        calendar.setTime(new Date());
        request.setCharacterEncoding("UTF-8");
        path = String.format("%s\%s\%s\%s\%s\%s", path, "file", "upload", calendar.get(calendar.YEAR),
                calendar.get(calendar.MONTH), calendar.get(calendar.DAY_OF_MONTH));
        File filepath = new File(path);
        if (!filepath.exists()) {
            filepath.mkdirs();
        }

        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        // 获得文件
        MultipartFile multipartFile = multipartRequest.getFile("Filedata");//与前端设置的fileDataName属性值一致
        String filename = multipartFile.getOriginalFilename();// 文件名称

        OutputStream os = null;
        InputStream is = null;
        File uploadFile = null;
        try {
            is = multipartFile.getInputStream();
            if (is != null) {
                uploadFile = new File(filepath, System.currentTimeMillis() + filename.substring(filename.lastIndexOf(".") - 1));
                os = new FileOutputStream(uploadFile);
                IOUtils.copy(is, os);
                os.flush();
            }
        } catch (IOException e) {
            e.printStackTrace();
            return false;
        } finally {
            IOUtils.closeQuietly(os);
            IOUtils.closeQuietly(is);
        }
        return true;
    }
}

查看全文

相关阅读:
3.17JSP作业
 JSP第二次作业
 JSP第一次作业
 软件测试课堂练习
 增删改查
 登录界面
 购物商城
 图床
 JSP-2020年4月14日-第七周
 JSP-2020年4月12日-第六周

原文地址：https://www.cnblogs.com/always-online/p/4482394.html

最新文章
3.28第四周作业
 20210303第一次课下作业
 20200311作业第二次
 2021.3.4作业
 第七次作业
 第六周作业
 第五周作业
 jsp第六周作业
 jsp第四周
 jsp第二次作业