js上传控件 plupload 使用记录_js plupload.full.min.js 参数 directory-优快云博客

本文链接：https://blog.youkuaiyun.com/ouyango321/article/details/37523737

本文介绍如何在项目中集成Plupload实现多图片上传，并详细记录了从引入JS文件到后台上传处理的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近一个项目需要使用一个上传控件进行多图片上传，给用户更好的体验，找到了plupload，用了一下感觉还是不错的，下面是我使用的的一些记录

1.从官网上可以获得例子，我集成到了jsp，如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  
<link media="screen" href="css/jquery-ui.min.css" rel="stylesheet" type="text/css">
<link media="screen" href="css/jquery.ui.plupload.css" rel="stylesheet" type="text/css">
<script  src="js/jquery.js" type="text/javascript"></script>
<script charset="UTF-8" src="js/jquery-ui.min.js" type="text/javascript"></script>
<script charset="UTF-8" src="js/plupload.full.min.js" type="text/javascript"></script>
<script charset="UTF-8" src="js/jquery.ui.plupload.min.js" type="text/javascript"></script>
<script  src="js/zh_CN.js" type="text/javascript"></script>
 <script type="text/javascript">
$(function() {
    $("#uploader").plupload({
        // General settings
        runtimes : 'html5,flash,silverlight,html4,html',
        url : "file/upload",
 
        // Maximum file size
        max_file_size : '20mb',
 
        chunk_size: '10mb',
 
        // Resize images on clientside if we can
        resize : {
            width : 1000,
            height : 1000,
            quality : 90,
            crop: true // crop to exact dimensions
        },
 
        // Specify what files to browse for
        filters : [
            {title : "Image files", extensions : "jpg,gif,png"},
            {title : "Zip files", extensions : "zip,avi"}
        ],
 
        // Rename files by clicking on their titles
        rename: true,
         
        // Sort files
        sortable: true,
 
        // Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
        dragdrop: true,
 
        // Views to activate
        views: {
            list: true,
            thumbs: true, // Show thumbs
            active: 'thumbs'
        },
 
        // Flash settings
        flash_swf_url : 'js/Moxie.swf',
     
        // Silverlight settings
        silverlight_xap_url : 'js/Moxie.xap'
    })
});
</script>
  </head>
  
  <body>
  <div id="uploader">
	</div>
  </body>
</html>

2.导入相应的js文件，与css美化，结构如下:

3.到了这一步，基本上这个控件的样子出来了，下面是后台获取上传文件源码 (ps:本人用的springmvc) 上传文件用的 spring写好的 MultipartHttpServletRequest 这个类，首先，spring-mvc配置 MultipartHttpServletRequest 的视图配置

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
      <property name="maxUploadSize" value="104857600"/>
        <property name="maxInMemorySize" value="4096"/>
   </bean>

4.控制器实现上传

package com.springfreemark.web.controller;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;
import java.util.Map.Entry;

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

import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.springframework.stereotype.Component;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

@Component
@RequestMapping("/file/")
public class UploadController extends BaseController {
    String UPLOADDIR="F:/upload";
    
    
    @RequestMapping("upload")
    public void exec(HttpServletRequest request,HttpServletResponse response){
        MultipartHttpServletRequest multiReq = (MultipartHttpServletRequest) request;
        HashMap<String, MultipartFile>  hashMap=(HashMap<String, MultipartFile>) multiReq.getFileMap();
        InputStream  inputStream=null;
        FileOutputStream outputStream=null;
        try {
        for (Entry<String,MultipartFile> entry : hashMap.entrySet()) {
            MultipartFile  file = entry.getValue();
            inputStream =  file.getInputStream();
            File  fileDir= new File(UPLOADDIR);
            if(!fileDir.exists()||!fileDir.isDirectory()){
                fileDir.mkdir();
            }
            File uploadFile= new File(UPLOADDIR+"/"+System.currentTimeMillis()+file.getOriginalFilename());
            if(uploadFile.exists()){
                uploadFile.delete();
            }
            uploadFile.createNewFile();
            outputStream  =new FileOutputStream(uploadFile);
            byte[]  bs =  new byte[1024];
            int len=0;
            while ((len=inputStream.read(bs))>0) {
                outputStream.write(bs);
            }
            System.out.println(file.getOriginalFilename()+"上传成功");
        }
        response.getWriter().print("全部上传成功");
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }finally{
            try {
                if(inputStream!=null){
                    inputStream.close();
                }
                if(outputStream!=null){
                    outputStream.close();
                }
            } catch (Exception e) {
                // TODO: handle exception
            }
        
        }
    }
}

至此，大功告成！