百度上传控件webUPload 的使用
来源:互联网 发布:linux php5.6编译参数 编辑:程序博客网 时间:2024/05/01 08:41
要使用上传控件首先需要引用webuploader的js文件以及css文件,还有对应的image文件
具体可以根据使用选择http://fex.baidu.com/webuploader/download.html这个网址上面下载文件,地址如果失效可以自己百度一下 webuploader 下载即可
引用完对应的文件后就可以编写页面了
首先引用js以及css文件
<script src="${pageContext.request.contextPath}/js/jquery.js"></script><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/webuploader.css"><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/diyUpload.css"><script type="text/javascript" src="${pageContext.request.contextPath}/js/webuploader.html5only.min.js"></script><script type="text/javascript" src="${pageContext.request.contextPath}/js/diyUpload.js"></script>
以及自己需要写控制图片显示的位置的css
/* css样式,用来控制有图片之后的显示方式,可以不添加 */ *{ margin:0; padding:0;}#box{ margin:50px auto; width:540px; min-height:400px; background:#FF9}#demo{ margin:50px auto; width:540px; min-height:800px; background:#CF9}
在页面中只需要写上
<body><div id="box"><div id="test"></div></div><div id="demo"><div id="as"></div></div></body>js中完成webuploader的加载方法和上传方法
<script type="text/javascript">/* * 服务器地址,成功返回,失败返回参数格式依照jquery.ajax习惯; * 其他参数同WebUploader */$('#test').diyUpload({url : 'upLoadFile',success : function(data) {console.info(data);},error : function(err) {console.info(err);}});$('#as').diyUpload({url : 'upLoadFile',success : function(data) {console.info(data);},error : function(err) {console.info(err);},buttonText : '选择文件',chunked : true,// 分片大小chunkSize : 10 * 1024 * 1024,//最大上传的文件数量, 总文件大小,单个文件大小(单位字节);fileNumLimit : 50,fileSizeLimit : 100 * 1024 * 1024,fileSingleSizeLimit : 10 * 1024 * 1024,accept : {}});</script>
这样页面就方面就完成了,只需要在后台写一个对应的接收传递过来图片的方法就行了我这里叫做upLoadFile方法
下面是我upLoadFile方法的源码
@RequestMapping("upLoadFile")public void uploadFile(HttpServletRequest request,HttpServletResponse response, String name, String filename,MultipartFile file) {//转换MultipartFile类型为file类型CommonsMultipartFile cf = (CommonsMultipartFile) file;DiskFileItem fi = (DiskFileItem) cf.getFileItem();File files = fi.getStoreLocation();//得到保存的相对路径String savePath = request.getServletContext().getRealPath("/upload");//创建文件路径File dir = new File(savePath);//生成输入输出流InputStream in = null;OutputStream out = null;try {//把文件导入输入流in = new FileInputStream(files);//生成保存的文件File saveFile = new File(dir, name);//生成输出流out = new FileOutputStream(saveFile);//把输入流copy到输出流IOUtils.copy(in, out);} catch (Exception e) {} finally {//关闭输入输出流IOUtils.closeQuietly(in);IOUtils.closeQuietly(out);}//设置返回的json字符串response.setContentType("text/xml;charset=utf-8");PrintWriter outPrint;try {outPrint = response.getWriter();outPrint.print("成功");} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}}这样一个简单的文件上传就完成了
还有一点,如果上传图片或者文件的时候需要附带参数的话只需要加上formData:{"studentId":"123"}属性到
$('#test').diyUpload({url : 'upLoadFile',
formData:{"studentId":"123"},success : function(data) {console.info(data);},error : function(err) {console.info(err);}});
后台只需要吧接收对应的属性值即可
0 0
- 百度上传控件webUPload 的使用
- 百度webupload的使用
- 对百度上传webupload插件的两种写法
- webupload大文件上传的坑
- Webupload 文件上传
- WebUpload文件上传
- webupload 上传文件
- 百度上传插件(webupload)单文件(单图片)上传设置
- webupload文件上传过程中遇到的一个问题
- webupload 上传插件-图片上传
- Servlet实现webupload文件上传
- Webupload+PHP上传大文件
- webupload大文件分片上传
- 上传控件的使用
- WebUpload
- WebUpload 视频上传,支持多视频上传
- 百度上传控件webuploader的上传与修改,Java版本
- webupload 多个实例化上传按钮
- 怎样新学一门技术
- JAVA学习摘记
- Curl 常用命令示例
- 根据前序遍历和后续遍历建立二叉树
- 前台RelativeLayout xmlns 线性布局 onCreate方法代码
- 百度上传控件webUPload 的使用
- SAP 结账流程
- 图片的压缩
- Linux内核地址映射模型-高端内存
- linux下tomcat启动 8080被占用
- Qt—遍历文件夹以及过滤文件
- SAP CK40N常见问题
- JAVA进制概述
- objective-c 委托的理解与应用