webuploader上传图片

官网下载地址：http://fex.baidu.com/webuploader/

1.将文件夹修改成名字为webuploader 直接放在WebContent下

2.将examples/image-upload/index.html 复制一份到WebContent下并修改文件中引用的css/js的资源路径

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>WebUploader演示</title><link rel="stylesheet" type="text/css" href="webuploader/css/webuploader.css" /><link rel="stylesheet" type="text/css" href="webuploader/examples/image-upload/style.css" />
</head>
<body><div id="wrapper"><div id="container"><!--头部，相册选择和格式选择--><div id="uploader"><div class="queueList"><div id="dndArea" class="placeholder"><div id="filePicker"></div><p>或将照片拖到这里，单次最多可选300张</p></div></div><div class="statusBar" style="display:none;"><div class="progress"><span class="text">0%</span><span class="percentage"></span></div><div class="info"></div><div class="btns"><div id="filePicker2"></div><div class="uploadBtn">开始上传</div></div></div></div></div></div><script type="text/javascript" src="webuploader/examples/image-upload/jquery.js"></script><script type="text/javascript" src="webuploader/dist/webuploader.js"></script><script type="text/javascript" src="webuploader/examples/image-upload/upload.js"></script>
</body>
</html>

3.在upload.js中修改文件上传的路径

4.编写后台代码

本文以servlet为例，代码如下：

package com.lq.webUploader;import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
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.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
@WebServlet("/upload")
public class UploadServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// 设置文件上传路径  D:/apache-tomcat-6.0.35/webapps/upload/WEB-INF/uploadString savePath = this.getServletContext().getRealPath("/WEB-INF/upload");File file = new File(savePath);// 判断上传文件的保存目录是否存在if (!file.exists()) {// 创建目录file.mkdir();}// 消息提示String message = "";try {// 使用Apache文件上传组件处理文件上传步骤：// 1、创建一个DiskFileItemFactory工厂DiskFileItemFactory factory = new DiskFileItemFactory();// 2、创建一个文件上传解析器ServletFileUpload upload = new ServletFileUpload(factory);// 解决上传文件名的中文乱码upload.setHeaderEncoding("UTF-8");// 3、 检测是否为多媒体上传if (!ServletFileUpload.isMultipartContent(request)) {// 按照传统方式获取数据return;}// 4、使用ServletFileUpload解析器解析上传数据，解析结果返回的是一个List<FileItem>集合，//每一个FileItem对应一个Form表单的输入项List<FileItem> list = upload.parseRequest(request);for (FileItem item : list) {// 如果fileitem中封装的是普通输入项的数据if (item.isFormField()) {String name = item.getFieldName();// 解决普通输入项的数据的中文乱码问题String value = item.getString("UTF-8");//System.out.println(name + "=" + value);} else {// 如果fileitem中封装的是上传文件得到上传的文件名称，String filename = item.getName();                   if (filename == null || filename.trim().equals("")) {continue;}filename = filename.substring(filename.lastIndexOf("\\") + 1);// 创建一个文件输出流FileOutputStream out = new FileOutputStream(savePath + "\\"+ filename);// 获取item中的上传文件的输入流InputStream in = item.getInputStream();// 创建一个缓冲区byte buffer[] = new byte[1024];// 判断输入流中的数据是否已经读完的标识int len = 0;// 循环将输入流读入到缓冲区当中，(len=in.read(buffer))>0就表示in里面还有数据while ((len = in.read(buffer)) > 0) {out.write(buffer, 0, len);}// 关闭输入流in.close();// 关闭输出流out.close();message = "文件上传成功！";response.setCharacterEncoding("utf-8");response.getWriter().write(message);}}} catch (Exception e) {e.printStackTrace();}}
}

5.测试

webuploader上传图片相关推荐

房源分页展示和实现webuploader上传图片
分页展示创建资源控制器并关联模型 php artisan make:controller Admin/FangController -r -m Models/Fang //资源路由 Route::r ...
WebUploader 上传图片回显
/* fileMaxCount 最大文件数 buttonText 按钮文本 multiple 是否多选 */ (function ($) {$.fn.extend({uploadImg: functi ...
WebUploader上传图片插件
学习地址:http://fex.baidu.com/webuploader/ 文档接口:http://fex.baidu.com/webuploader/document.html Demo:http ...
webuploader上传图片插件案例
1.引入插件 <link rel="stylesheet" href="../../resources/js/plugins/webuploader-0.1.5/w ...
js插件---webuploader 使用（lavarel中使用）
js插件---webuploader 使用(lavarel中使用) 一.总结一句话总结: 多去看几个具体使用的实例,很多blog教程都有坑,多看几个交叉印证可以没那么多坑 1.webuploader ...
webuploader多图片 php,php+WebUploader图片批量上传
一.webuploader webuploader主要用来做文件的上传,支持批量上传和图片预览,图片预览是将图片生成base64数据直接在标签中使用,所以能够达到的效果是未真正上传图片可以先看到上传 ...
毕业五年，室友嫌小厂工资低，跳槽快手二面被拒
有个朋友毕业几年,一直在家规模比较小的公司做 Java 开发,工资也处于行业中下游.最近看到跳进大厂的同事工资都涨了不少,他也打算跳槽涨一波薪水. 在招聘软件上随便一搜,就能看到大厂的Java岗位待遇 ...
mvc上传图片(上传和预览)webuploader
笔者看到mvc最近比较流行,而很多使用一些比较旧的的方法上传图片,再次安利一下百度的webuploader控件吧 webuploader第一步要先下载一些插件这点可以在webuploader官网上下 ...
Android上传文件到服务器500,使用WebUploader解决安卓微信浏览器上传图片中遇到的bug...
摘自个人博客:走啊走的记录,欢迎点击查看,效果更佳! 微信浏览器上传图片bug的原因微信在新版本中采用的是自己的X5内核浏览器,而在较老的版本中还有可能是安卓的原生浏览器.具体的环境我也不太了解,但 ...

webuploader上传图片

webuploader上传图片相关推荐

最新文章

热门文章