webuploader+avalonjs 图片异步上传

最新推荐文章于 2023-05-24 09:50:50 发布

怪我冷i

最新推荐文章于 2023-05-24 09:50:50 发布

阅读量1k

点赞数

分类专栏： java javaScript spring 文章标签： webuploader上传图片 avalonjs

本文链接：https://blog.csdn.net/e891377/article/details/77641129

版权

java 同时被 3 个专栏收录

175 篇文章 4 订阅

订阅专栏

javaScript

18 篇文章 0 订阅

订阅专栏

spring

16 篇文章 0 订阅

订阅专栏

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的话，要引入如下包
这里写图片描述

怪我冷i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webuploader+avalonjs 图片异步上传

webuploader+avalonjs 图片异步上传js部分1js部分1和js部分2代码都基本一样的，引用一份就可以了,js部分2只是为了说明和avalonjs配合使用(function(){ var uploader = WebUploader.create( { swf:$('#path').val()+'/stat/webupl
复制链接

扫一扫

专栏目录