【uploadify3.1使用二】批量文件、图片上传

最新推荐文章于 2021-05-15 07:30:09 发布

DracoTianlong

最新推荐文章于 2021-05-15 07:30:09 发布

阅读量6.9k

点赞数 3

分类专栏： JQuery JS

本文链接：https://blog.csdn.net/Dracotianlong/article/details/8770348

版权

JS 同时被 2 个专栏收录

44 篇文章 0 订阅

订阅专栏

JQuery

17 篇文章 0 订阅

订阅专栏

1、uploadify3.1的使用方式有别与2.x的版本，3.1版本已经把swfobject.js 给嵌入jquery.uploadify-3.1.min.js中，

2、引入资源文件

		<link rel="stylesheet" href="uploadify/uploadify.css" type="text/css"></link>
		<script type="text/javascript" src="uploadify/jquery-1.7.2.min.js"></script>
		<script type="text/javascript"
			src="uploadify/jquery.uploadify-3.1.min.js"></script>

3、头部写入

<script type="text/javascript">
			$(function() {
			    $("#multiple_file_upload").uploadify({
			    	'height'        : 27, 
			    	'width'         : 80,  
			    	'buttonText'    : '浏 览',
			        'swf'           : '<%=path%>/uploadify/uploadify.swf',
			        'uploader'      : '<%=path%>/servlet/UploadifySerlet',
			        'auto'          : false,
			        'fileTypeExts'  : '*.jpg;*.png;*.gif;*.bmp',
			        'formData'      : {'userName':'','qq':''},
			        'onUploadStart' : function(file) {
			        	//$("#file_upload").uploadify("settings", "formData", {'userName':name,'qq':qq});
			        	//$("#file_upload").uploadify("settings", "qq", );
			        }
			    });
			});
		
	</script>

4、body中写入

<body>

		
		<input type="file" name="uploadify" id="multiple_file_upload" />
		<hr>
		<a href="javascript:$('#multiple_file_upload').uploadify('upload','*')">开始上传</a>    
        <a href="javascript:$('#multiple_file_upload').uploadify('cancel', '*')">取消所有上传</a> 
	</body>

5、后台代码

package com.yangpan.uploadify;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Arrays;
import java.util.Date;
import java.util.Iterator;
import java.util.List;
import java.util.Random;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

public class UploadifySerlet extends HttpServlet
{

    /**
     * 
     */
    private static final long serialVersionUID = 1L;

    // 上传文件的保存路径
    protected String configPath = "attached/";

    protected String dirTemp = "attached/temp/";

    protected String dirName = "file";

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        this.doPost(request, response);
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html; charset=UTF-8");
        PrintWriter out = response.getWriter();
        // 文件保存目录路径
        String savePath = this.getServletContext().getRealPath("/") + configPath;
        // 临时文件目录
        String tempPath = this.getServletContext().getRealPath("/") + dirTemp;
        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMM");
        String ymd = sdf.format(new Date());
        savePath += "/" + ymd + "/";
        // 创建文件夹
        File dirFile = new File(savePath);
        if (!dirFile.exists())
        {
            dirFile.mkdirs();
        }
        tempPath += "/" + ymd + "/";
        // 创建临时文件夹
        File dirTempFile = new File(tempPath);
        if (!dirTempFile.exists())
        {
            dirTempFile.mkdirs();
        }

        DiskFileItemFactory factory = new DiskFileItemFactory();
        factory.setSizeThreshold(20 * 1024 * 1024); // 设定使用内存超过5M时，将产生临时文件并存储于临时目录中。
        factory.setRepository(new File(tempPath)); // 设定存储临时文件的目录。

        ServletFileUpload upload = new ServletFileUpload(factory);
        upload.setHeaderEncoding("UTF-8");

        try
        {
            List items = upload.parseRequest(request);
            Iterator itr = items.iterator();

            while (itr.hasNext())
            {
                FileItem item = (FileItem) itr.next();
                String fileName = item.getName();
                long fileSize = item.getSize();
                if (!item.isFormField())
                {
                    String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();

                    SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
                    String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;
                    try
                    {
                        File uploadedFile = new File(savePath, newFileName);
                        OutputStream os = new FileOutputStream(uploadedFile);
                        InputStream is = item.getInputStream();
                        byte buf[] = new byte[1024];// 可以修改 1024 以提高读取速度
                        int length = 0;
                        while ((length = is.read(buf)) > 0)
                        {
                            os.write(buf, 0, length);
                        }
                        // 关闭流
                        os.flush();
                        os.close();
                        is.close();
                        System.out.println("上传成功！路径：" + savePath + "/" + newFileName);
                        out.print("1");
                    }
                    catch (Exception e)
                    {
                        e.printStackTrace();
                    }
                }
                else
                {
                    String filedName = item.getFieldName();
                    // if (filedName.equals("userName"))
                    // {
                    // name = item.getString();
                    // }
                    // else
                    // {
                    // qq = item.getString();
                    // }
                    System.out.println("FieldName：" + filedName);
                    System.out.println("String：" + item.getString());
                    // System.out.println("String()："+item.getString(item.getName()));
                    System.out.println("===============");
                }
            }

        }
        catch (FileUploadException e)
        {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        out.flush();
        out.close();
    }

}

6、效果

打完收工，比较喜欢step by step，呵呵，太过程化了，没有思维。哈哈

DracoTianlong

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
11
评论
【uploadify3.1使用二】批量文件、图片上传

1、uploadify3.1的使用方式有别与2.x的版本，3.1版本已经把swfobject.js 给嵌入jquery.uploadify-3.1.min.js中，2、引入资源文件 <script type="text/javascript" src="uploadify/jquery.uploadify-3.1.min.js">3、头部写入
复制链接

扫一扫