webuploader+avalonjs 图片异步上传

webuploader+avalonjs 图片异步上传

js部分1

js部分1和js部分2代码 都基本一样的，引用一份就可以了,js部分2只是为了说明和avalonjs配合使用

(function(){    var uploader = WebUploader.create(            {                swf:$('#path').val()+'/stat/webuploader-0.1.5/Uploader.swf',                server:$('#path').val()+'/UploadServlet',                pick:'#filePicker',                auto:true,//是否自动上传                fileNumLimit:10,                fileSingleSizeLimit:1024*1024*2,                accept:{                    title: 'Images',                    extensions: 'jpg,jpeg',                    mimeTypes: 'image/*'                },                duplicate:false,                resize: false            }        );uploader.on('fileQueued',function(file){    console.info(' 文件等待上传 id:'+file.id+'  名称:'+file.name+'  '+new Date());});uploader.on('uploadSuccess',function(file,response){    console.info(response);    console.info(' 文件上传完毕  id:'+file.id+'  ');})uploader.on('error',function(type){    console.info(type);    if(type=='F_EXCEED_SIZE'){        console.info('文件上传超大小');    }    if(type=='Q_TYPE_DENIED'){        console.info('错误的文件类型');    }    if(type=='F_DUPLICATE'){        console.info('上传文件重复');    }})//$("#submitBtn").on('click',function(){//auto为false时,调用这个代码//  console.info('submitBtn');//  console.info(uploader);//  uploader.option('formData',{//      userNmae:'小李',//      userAge:11//  })//  uploader.upload();//})$("#ckileBtn1,#ckileBtn2,#ckileBtn3").on('click',function(){    $("input[name='file']").trigger("click");})}()) //说明//第一步,导入配置文件//  <script type="text/javascript" src="<%=request.getContextPath()%>/stat/jquery/jquery-1.10.2.min.js"></script>//  <script type="text/javascript" src="<%=request.getContextPath()%>/stat/webuploader-0.1.5/webuploader.js"></script>//  <script type="text/javascript" src="<%=request.getContextPath()%>/stat/js/upload2.js"></script>//第二步,页面放入隐藏div//<!-- 上传div -->//<div id="uploader" style="display:none;">//  <input id="path" value="<%=request.getContextPath()%>">//  <!-- 显示文件列表信息 -->//  <ul id="fileList"></ul>//  <!-- 选择文件区域 -->//  <ul id="filePicker">点击选择文件</ul><br/><br/>//</div>//第三步,在页面设置按钮

js部分2

/** * 图片上传插件 */(function(vm){    if((typeof vm)=='undefined'){        console.info('vm未定义');    }    var com_id = document.getElementById('com_id').value;    var uploader = WebUploader.create(            {                swf:rootPath+'/static/common/js/webuploader-0.1.5/Uploader.swf',                server:rootPath+"app/account/fileUpload",                pick:'#filePicker',                auto:true,//是否自动上传                fileNumLimit:10,                fileSingleSizeLimit:1024*1024*2,                accept:{                    title: 'Images',                    extensions: 'jpg,jpeg',                    mimeTypes: 'image/*'                },                duplicate:false,                resize: false            }        );uploader.option('formData',{    com_id:com_id,    com_name:'哈哈公司'})uploader.on('fileQueued',function(file){    //console.info(' 文件等待上传 id:'+file.id+'  名称:'+file.name+'  '+new Date());});uploader.on('uploadSuccess',function(file,response){    //console.info(response);    //console.info(' 文件上传完毕  id:'+file.id+'  ');    vm.uploadFileSuccess(response);})uploader.on('error',function(type){    //console.info(type);    if(type=='F_EXCEED_SIZE'){        //console.info('文件上传超大小');        alert('文件上传超大小');    }    if(type=='Q_TYPE_DENIED'){        //console.info('错误的文件类型');        alert('错误的文件类型,文件类型为');    }    if(type=='F_DUPLICATE'){        //console.info('上传文件重复');        alert('上传文件重复');    }})//$("#submitBtn").on('click',function(){//auto为false时,调用这个代码//  console.info('submitBtn');//  console.info(uploader);//  uploader.option('formData',{//      userNmae:'小李',//      userAge:11//  })//  uploader.upload();//})//$("#ckileBtn1,#ckileBtn2,#ckileBtn3").on('click',function(){//  $("input[name='file']").trigger("click");//})}(myViewModel)) //说明//第一步,导入配置文件//  <script type="text/javascript" src="<%=request.getContextPath()%>/stat/jquery/jquery-1.10.2.min.js"></script>//  <script type="text/javascript" src="<%=request.getContextPath()%>/stat/webuploader-0.1.5/webuploader.js"></script>//  <script type="text/javascript" src="<%=request.getContextPath()%>/stat/js/upload2.js"></script>//第二步,页面放入隐藏div//<!-- 上传div -->//<div id="uploader" style="display:none;">//  <input id="path" value="<%=request.getContextPath()%>">//  <!-- 显示文件列表信息 -->//  <ul id="fileList"></ul>//  <!-- 选择文件区域 -->//  <ul id="filePicker">点击选择文件</ul><br/><br/>//</div>//第三步,在页面设置按钮

后台代码

package jd;import java.io.File;import java.io.IOException;import java.io.InputStream;import java.util.List;import javax.servlet.ServletException;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;import org.apache.commons.io.FileUtils;/** * Servlet implementation class UploadServlet */public class UploadServlet extends HttpServlet {    private static final long serialVersionUID = 1L;    private static final String serverPath = "e:/uploader/";    /**     * @see HttpServlet#HttpServlet()     */    public UploadServlet() {        super();        // TODO Auto-generated constructor stub    }    /**     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)     */    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        // TODO Auto-generated method stub        response.getWriter().append("Served at: ").append(request.getContextPath());    }    /**     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)     */    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        // TODO Auto-generated method stub        //1.创建        DiskFileItemFactory factory = new DiskFileItemFactory();        //2.        ServletFileUpload sfu  = new ServletFileUpload(factory);        //3.设置文件名称的编码        sfu.setHeaderEncoding("utf-8");        //4.开始解析文件        try {            List<FileItem> items = sfu.parseRequest(request);            //5.获取文件信息            for(FileItem item:items){                //6.判断是文件还是普通数据                if(item.isFormField()){                    //普通数据                    String fileName = item.getFieldName();                    if(fileName.equals("info")){                        String info = item.getString("utf-8");                        System.out.println(info);                    }                }else{                    //文件                    String name = item.getName();                    InputStream inputStream = item.getInputStream();                    FileUtils.copyInputStreamToFile(inputStream, new File(serverPath+File.separator+name));                }            }        } catch (Exception e) {            // TODO: handle exception        }        String url  = "cc";        //response.getWriter().append("Served at: ").append(request.getContextPath());        response.getWriter().write("{\"url\":0}");    }}

页面部分

<%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%><%@ page import="java.util.*" %>   <html><head></head><body><h2>Hello World!!</h2><%=new Date().toString()%><br/><br/><form action="<%=request.getContextPath()%>/UploadServlet" method="post" enctype="multipart/form-data"></form><!-- 上传div --><div id="uploader" style="display:none;">    <input id="path" value="<%=request.getContextPath()%>">    <!-- 显示文件列表信息 -->    <ul id="fileList"></ul>    <!-- 选择文件区域 -->    <ul id="filePicker">点击选择文件</ul><br/><br/></div><button id="ckileBtn1">触发文件上传</button><button id="ckileBtn2">触发文件上传</button><button id="ckileBtn3">触发文件上传</button><button id="submitBtn">提交</button></body>    <script type="text/javascript" src="<%=request.getContextPath()%>/stat/jquery/jquery-1.10.2.min.js"></script>    <script type="text/javascript" src="<%=request.getContextPath()%>/stat/webuploader-0.1.5/webuploader.js"></script>    <script type="text/javascript" src="<%=request.getContextPath()%>/stat/js/upload2.js"></script></html>

pom部分

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">  <modelVersion>4.0.0</modelVersion>  <groupId>com.jdsc</groupId>  <artifactId>jd</artifactId>  <packaging>war</packaging>  <version>0.0.1-SNAPSHOT</version>  <name>jd Maven Webapp</name>  <url>http://maven.apache.org</url>      <properties>        <as.default.java.version>1.7</as.default.java.version>        <as.default.junit.version>4.8.2</as.default.junit.version>        <as.default.slf4j.version>1.6.6</as.default.slf4j.version>        <as.default.log4j.version>1.2.16</as.default.log4j.version>        <as.default.javax.servlet.version>2.5</as.default.javax.servlet.version>        <as.default.javax.servlet.jsp.version>2.1</as.default.javax.servlet.jsp.version>        <as.default.springframework.version>4.0.3.RELEASE</as.default.springframework.version>        <as.default.hibernate.version>3.5.0-Final</as.default.hibernate.version>        <as.default.camel.version>2.9.4</as.default.camel.version>        <as.default.activemq.version>5.6.0</as.default.activemq.version>        <project.build.maven.compiler.plugin.version>2.3.2</project.build.maven.compiler.plugin.version>        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>    </properties>  <dependencies>            <dependency>                <groupId>org.slf4j</groupId>                <artifactId>slf4j-api</artifactId>                <version>${as.default.slf4j.version}</version>                <scope>compile</scope>            </dependency>            <dependency>                <groupId>org.slf4j</groupId>                <artifactId>slf4j-log4j12</artifactId>                <version>${as.default.slf4j.version}</version>                <scope>compile</scope>            </dependency>            <dependency>                <groupId>log4j</groupId>                <artifactId>log4j</artifactId>                <version>${as.default.log4j.version}</version>                <scope>compile</scope>            </dependency>            <dependency>                <groupId>junit</groupId>                <artifactId>junit</artifactId>                <version>${as.default.junit.version}</version>                <scope>test</scope>            </dependency>            <dependency>                <groupId>javax.servlet</groupId>                <artifactId>servlet-api</artifactId>                <version>${as.default.javax.servlet.version}</version>                <scope>provided</scope>            </dependency>            <dependency>                <groupId>javax.servlet.jsp</groupId>                <artifactId>jsp-api</artifactId>                <version>${as.default.javax.servlet.jsp.version}</version>                <scope>provided</scope>            </dependency>            <dependency>                <groupId>commons-io</groupId>                <artifactId>commons-io</artifactId>                <version>2.2</version>            </dependency>            <dependency>                <groupId>commons-fileupload</groupId>                <artifactId>commons-fileupload</artifactId>                <version>1.2.2</version>            </dependency>  </dependencies>  <build>    <plugins>            <plugin>                <groupId>org.apache.maven.plugins</groupId>                <artifactId>maven-compiler-plugin</artifactId>                <version>3.2</version>                <configuration>                    <verbose>true</verbose>                    <source>1.7</source>                    <target>1.7</target>                    <showWarnings>true</showWarnings>                </configuration>            </plugin>            <plugin>                <groupId>org.apache.tomcat.maven</groupId>                <artifactId>tomcat7-maven-plugin</artifactId>                <version>2.2</version>                <configuration>                    <path>/</path>                    <contextReloadable>true</contextReloadable>                </configuration>            </plugin>    </plugins>      <finalName>jd</finalName>  </build></project>

项目图片

运行项目

在Eclipse的M2插件输入tomcat7:run就可以了

引入包

不用maven的话，要引入如下包