js上传控件 plupload 使用记录
最近一个项目需要使用一个上传控件进行多图片上传,给用户更好的体验,找到了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
}
}
}
}
至此,大功告成!
附件列表
js上传控件 plupload 使用记录的更多相关文章
- jquery文件上传控件 Uploadify 问题记录
Uploadify v3.2.1 首先引用下面的文件 <!--上传控件 uploadify--> <script type="text/javascript" s ...
- 前端上传控件plupload总结
plupload是一个单图和多图上传控件: 属性和方法介绍,参考以下博客: https://www.cnblogs.com/2050/p/3913184.html 这里直接贴出JS代码,细到爆的注释, ...
- 纯js上传控件——fineuploader
fineuploader是一款基于ajax实现文件上传的插件,具有以下有点: A:支持文件上传进度显示. B:文件拖拽浏览器上传方式 C:Ajax页面无刷新. D:多文件上传. F:跨浏览器. E:跨 ...
- jquery.html5uploader.js 上传控件
插件地址:http://blog.csdn.net/never_say_goodbye/article/details/8598521 先上个效果图: 相比来说,效果还是很不错的 使用MVC3做服务器 ...
- plupload上传控件错误exec(this.uid, component, action, args)
plupload上传控件错误exec(this.uid, component, action, args) --undefined is not a function 原因:Flash元素隐藏后调用控 ...
- Js获取file上传控件的文件路径总结
总结一个获取file上传控件文件路径的方法 firefox由于保护机制只有文件名,不能获取完整路径. document.getElementById('file').onchange = functi ...
- 百度 flash html5自切换 多文件异步上传控件webuploader基本用法
双核浏览器下在chrome内核中使用uploadify总有302问题,也不知道如何修复,之所以喜欢360浏览器是因为帮客户控制渲染内核: 若页面需默认用极速核,增加标签:<meta name=& ...
- 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传)
前言 首先声明一下,我这个是对WebUploader开源上传控件的二次封装,底层还是WebUploader实现的,只是为了更简洁的使用他而已. 下面先介绍一下WebUploader 简介: WebUp ...
- 基于AngularJs的上传控件-angular-file-upload
今天跟大家分享的是一个依赖于angular的上传控件. 前段时间做项目遇到一个需求是上传文件,大概需要实现的样式是这样子的,见下图: 需要同时上传两个文件.并且规定文件格式和文件大小.因为前端框架使用 ...
随机推荐
- 【LaTeX】E喵的LaTeX新手入门教程(2)基础排版
换了块硬盘折腾了好久..联想的驱动真坑爹.前情回顾[LaTeX]E喵的LaTeX新手入门教程(1)准备篇文档框架嗯昨天我们已经编写了一个最基本的文档,其内容是这样的:\documentclass{ar ...
- [转]SSIS error DTS_E_CANNOTACQUIRECONNECTIONFROMCONNECTIONMANAGER when connecting to Oracle data source
本文转自:http://blogs.msdn.com/b/jorgepc/archive/2008/02/12/ssis-error-dts-e-cannotacquireconnectionfrom ...
- scikit-learn入门学习记录
一加载示例数据集 from sklearn import datasets iris = datasets.load_iris() digits = datasets.load_digits() 数据 ...
- 【Docker】利用数据卷容器来备份、恢复、迁移数据卷
利用数据卷容器来备份.恢复.迁移数据卷 可以利用数据卷对其中的数据进行进行备份.恢复和迁移. 备份 首先使用 --volumes-from 标记来创建一个加载 dbdata 容器卷的容器,并从主机挂载 ...
- 网页HTML代码:滚动文字的制作
本节笔者讲述HTML代码中比较特殊的标签,它能使网页中的文字滚动,并且可以控制其滚动的属性. 制作滚动文字 通过本章前面的学习,读者已经能够很好地控制各种段落文字的显示方式,不过无论怎么设置,文字都是 ...
- java集合Collection接口
collection集合 Map集合 Hashtable和HashMap的区别: Hashtable的方法是同步的,而HashMap的方法不是.HashMap可以将空值作为一个表的条目的key或val ...
- URL重写:RewriteCond指令与RewriteRule 指令格式
Rewirte基本的功能就是实现URL的跳转和隐藏真实地址,基于Perl语言的正則表達式规范.平时帮助我们实现拟静态,拟文件夹,域名跳转,防止盗链等.本文将针对mod_rewrite和URL匹配的技术 ...
- java new map
import com.google.common.collect.Maps; public static Map<String, Object> configMap2 = new Conc ...
- Intellij idea 快键键
1.快速进入实现类: Command + Alt+B 2.全局查找: Shift + Shift 3.类继承关系: Ctrl + H 4.在继承层次上跳转则用 Command + B / Comman ...
- 15个极好的Linux find命令示例
基于访问/修改/更改时间查找文件 你可以找到基于以下三个文件的时间属性的文件. 访问时间的文件.文件访问时,访问时间得到更新. 的文件的修改时间.文件内容修改时,修改时间得到更新. 更改文件的时间.更 ...