如果是文件上传,那么首先想到的,一定是表单封装(enctype=“multipart form-data”,但是这种操作对于用户而言,体验干不好,而且也有可能造成一个非常可怕的局面,如果用户同时山川了许多的内容,(文件信息),当文件太大了,就有可能保存出错,从而导致输入的文字信息丢失,所以不推荐使用表单上传.
对于无刷新的组件本次使用uploadify组件,但是这个组件有两个版本,
- SWF()SWFUploadify:免费的,基于Flash完成的,
- HTML5版本:收费的

开发准备

首先准备出一个UploadfiyModule模块
将smartupload.jar文件配置到项目之中
将jQuery开发文件拷贝到js目录之中
建立一个uploadify/css文件夹,保存所需要的uploadify组件的css
在uploadify目录中建立一个img的目录,
再次目录中将所需要的js文件拷贝过去
将swf文件拷贝过去
jquery-uploadify插件下载地址:http://www.jq22.com/jquery-info103

实现异步上传(无刷新上传)

子啊服务器端将使用smartupload组件实现上传处理,所以建立一个UploadServlet程序类.

package mao.shu.servlet;

import com.jspsmart.upload.File;
import com.jspsmart.upload.Files;
import com.jspsmart.upload.SmartUpload;
import com.jspsmart.upload.SmartUploadException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class UploadServlet extends HttpServlet {
    @Override
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request,response);
    }
    @Override
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       //使用SmartUpload组件完成文件上传操作
        SmartUpload smartUpload = new SmartUpload();
        //初始化组件
        smartUpload.initialize(super.getServletConfig(),request,response);
        //将上传文件信息交给组件
        try {
            smartUpload.upload();
            for (int i = 0; i < smartUpload.getFiles().getCount(); i++) {
                //得到要上传的每一个文件信息
                File file = smartUpload.getFiles().getFile(i);
                //输出每一个文件的信息
                System.out.println("fileType = "+file.getContentType()+", filesize"+file.getSize()+", filename = "+file.getFieldName());
            }
        } catch (SmartUploadException e) {
            e.printStackTrace();
        }

    }
}

随后需要编写html页面:穿件upload_demo_a.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="uploadify/jquery.uploadify.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="uploadify/css/uploadify.css">
</head>
<body>
    <div id="fileQueue"></div>
    <div id="fileDiv"><input type="file" id="pic" name="pic"></div>
</body>
</html>

其中fileQueue只要是实现上传队列的生成二"fileDiv"主要是实现上传组件的定义
需要对组件进行一些处理操作,利用js完成,在页面中编写JavaScript代码

   <script type="text/javascript">
        $(function(){
            //pic为页面中上传组建的id
            //在uploadify函数中完成上传操作
           $("#pic").uploadify({
                "auto": true,//开启自动上传
               //找到swf文件位置
               "swf":"uploadify/yokiadify.swf",
               //找到文件所执行的程序
               "uploader":"UploadServlet",
                   "buttonText":"请选择上传文件",
               "fileObject":"photo"//上传参数的名字
           })
        })
    </script>

此时代码一旦执行会自动出现上传序列,随后在服务器端上业会发现相应的输出

在这里插入图片描述

使用uploadify组件实现的上传处理操作MIME类型都是"applicatioin octet-stream"
本次测试的时候发现只有IE浏览器支持,其他浏览器无法使用

在这里插入图片描述

异步上传加强

不管是表单上传还是异步上传处操作处理,上传完成之后应该将上传的内容返回给用户去浏览,很多时候都会考虑上传文件进行重命名的操作处理

可以将所有的上传文件保存到项目中的upload文件夹中
修改UploadServlet.java程序,此程序负责保存文件处理

package mao.shu.servlet;

import com.jspsmart.upload.File;
import com.jspsmart.upload.SmartUpload;
import com.jspsmart.upload.SmartUploadException;

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 java.io.IOException;
import java.util.UUID;

@WebServlet("/UploadServlet")
public class UploadServlet extends HttpServlet {
    @Override
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request,response);
    }
    @Override
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       //使用SmartUpload组件完成文件上传操作
        SmartUpload smartUpload = new SmartUpload();
        //初始化组件
        smartUpload.initialize(super.getServletConfig(),request,response);
        //将上传文件信息交给组件
        try {
            smartUpload.upload();
        } catch (SmartUploadException e) {
            e.printStackTrace();
        }
        //如果此时有文件要上传
        if(smartUpload.getSize()>0){
            //得到要上传的每一个文件信息
            File file = smartUpload.getFiles().getFile(0);
            //定义文件重命名名称
            String filename = UUID.randomUUID()+file.getFileExt();
            //定义保存文件的路径
            String fileSaveAs = super.getServletContext().getRealPath("/upload/")+filename;
            //保存每一个文件
            try {
                file.saveAs(fileSaveAs);
            } catch (SmartUploadException e) {
                e.printStackTrace();
            }
            //将文件名称打印到网页中
            response.getWriter().print(filename);
        }
        
        for (int i = 0; i < smartUpload.getFiles().getCount(); i++) {

            //得到要上传的每一个文件信息
            File file = smartUpload.getFiles().getFile(i);
            //输出每一个文件的信息
            System.out.println("fileType = "+file.getContentType()+", filesize = "+file.getSize()+", filename = "+file.getFileName());
        }

    }
}

本程序完成了两个事件,一个是进行上传文件的保存,另外一个时进行上传文件名称的返回
此时程序中已经有了上传名称,此时就可以在上传时接收文件名称.然后在根据返回的名称将图片显示处理
在也页面中添加一个"imgDiv"元素

<div id="imgDiv"></div>

修改页面中的JavaScript代码,添加"onUploadSuccess"事件处理

  <script type="text/javascript">
        $(function(){
            //pic为页面中上传组建的id
            //在uploadify函数中完成上传操作
            $("#pic").uploadify({
                "auto": true,//开启自动上传
                //找到swf文件位置
                "swf":"uploadify/uploadify.swf",
                //找到文件所执行的程序
                "uploader":"UploadServlet",
                "buttonText":"请选择上传文件",
                "fileObject":"photo",//上传参数的名字
                //当文件上传成功之后,file描述文件对象,data描述的是请求返回的内容
                "onUploadSuccess":function(file,data){
                    //将文件显示出页面之中
                    $("#imgDiv").append("<img width='200px' height='200px' src='upload/"+data+"'>")
                }
            })
        })
    </script>

此时可以选择多个上传文件,但是上传也是一次次上传完成的

在这里插入图片描述

这个时候当文件上传文件之后会返回当前的图片内容,但是我们需要清楚的是,此时的上传组件可以同时上传多个图片
有时有可能需要执行文件的删除处理,可以在上传文件成功之后,进行绑定一个单机事件.
修改JavaScript代码

           //当文件上传成功之后,file描述文件对象,data描述的是请求返回的内容
                "onUploadSuccess":function(file,data){
                    var imgObj = $("<img width='200px' height='200px' src='upload/"+data+"'>");
                    imgObj.on("click",function(){
                        $(this).remove();
                    });
                    //将文件显示出页面之中
                    $("#imgDiv").append(imgObj)
                }

最终效果图

在这里插入图片描述

上传控制

对于此事的上传处理操作发现存在有如下几个问题,
- 发现可以同时穿多个文件,有时候只需要一个文件;
- 发现对于上传的类型无法进行有效的控制;
- 发现上传都是用了自动完成方式.

解决多个文件的上传,在uploadify()函数中添加一个multi属性,值设置为false

          multi:false,

对于上传的类型进行控制,在uploadify函数中添加fileTypeExts属性,fileTypeDesc表示对文件的描述

                fileTypeDesc:"图片文件",
                fileTypeExts:"*.jpg;*.png;*.gif",

队列如果上传完成,那么也可以进行一些提示,使用"onqueueComplete"

需要进行额外的参数传递

formData:{
	"member.mid":"maoshu",
	"member.name":"Mao",
	"member.age":20
}

这个操作传到服务器上之后可以使用request.getParameter()方法来进行接收
设置上传队列的区域所在

queueID:"fileQueue"

改变上传队列的大小

queueSizeLimit:3

通过自己的操作对上传进行控制
- 如果要进行控制,那么首先要取消自动上传

                "auto": false,

在页面中添加三个控制按钮

<div id="deleteDiv"><input type="button" value="删除第一个" id="deleteBut"></div>
    <div id="upAllDiv"><input type="button" value="全部上传" id="upAllBut"></div>
    <div id="deleteAllDiv"><input type="button" value="删除所有" id="deleteAllBut"></div>

为这三个按钮绑定点击事件

           $("#deleteBut").on("click",function(){
                $("#pic").uploadify("cancel");

            });
            $("#deleteAllBut").on("click",function(){
                $("#pic").uploadify("cancel","*");

            });
            $("#upAllBut").on("click",function(){
                $("#pic").uploadify("upload","*");

            });

最后效果

在这里插入图片描述

AJax上传插件

开发准备

实现异步上传(无刷新上传)

异步上传加强

上传控制

猜你喜欢