您的位置：首页 > Web前端 > JavaScript

js上传控件 plupload 使用记录

2017-03-22 09:22 316 查看
最近一个项目需要使用一个上传控件进行多图片上传，给用户更好的体验，找到了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">

<scriptsrc="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>

<scriptsrc="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>

[/code]

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>

[/code]

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();

InputStreaminputStream=null;

FileOutputStream outputStream=null;

try {

for (Entry<String,MultipartFile> entry : hashMap.entrySet()) {

MultipartFilefile = entry.getValue();

inputStream =file.getInputStream();

FilefileDir= 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

}


}

}

}

[/code]

至此，大功告成！

附上：


附件列表

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航