uploadify java上传图片

最新推荐文章于 2021-02-17 03:52:02 发布

zhshchilss

最新推荐文章于 2021-02-17 03:52:02 发布

阅读量510

点赞数

本文链接：https://blog.csdn.net/zhshchilss/article/details/44101357

版权

1.导入jar包

这里写图片描述

commons-fileupload-1.2.2.jar
commons-io-2.0.1.jar
servlet-api.jar

2.导入uploadify相关js和css

这里写图片描述

3.配置web.xml里的servlet

<servlet>
        <servlet-name>FileServlet</servlet-name>
        <servlet-class>com.zhshch.servlet.MySevlet</servlet-class>
   </servlet>
   <servlet-mapping>
    <servlet-name>FileServlet</servlet-name>
    <url-pattern>/FileServlet</url-pattern>
  </servlet-mapping>

4.编写test上传页面

（1）引入相关依赖js和css

这里写图片描述

<script type="text/javascript" src="<%=request.getContextPath()%>/themes/default/js/common.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/themes/default/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/themes/default/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/themes/default/js/easyui-lang-zh_CN.js"></script>
<script src="uploadify/jquery.uploadify.js" type="text/javascript"></script>
<script src="uploadify/jquery.uploadify.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="uploadify/uploadify.css">
<style type="text/css">
body {
    font: 13px Arial, Helvetica, Sans-serif;
}
</style>

(2)js部分

这里写图片描述

<script>
$(function(){
    initUploadify("上传文件","file_upload");
}) ;
function initUploadify(filename,myid){
    $('#'+myid).uploadify(
            {
                'debug' : false,
                'swf' : 'uploadify/uploadify.swf',//上传按钮的图片，默认是这个flash文件(写死就行)
                'uploader' : 'FileServlet',//上传所处理的服务器(处理你上传的文件的地方 也可以是action，需要手动编写)
                'cancelImg' : '../uploadfiy/uploadify-cancel.png',//取消图片(写死就行)
                'method' : 'post',//(servlet这种方式 对应后台的dopost())
                'queueID' : 'fileQueue3',//上传显示进度条的那个div(在html中需要定义的)
                'buttonText' : "<a style = 'text-decoration:underline;font-style: italic;font-size:14'>"+filename+"</a>",//(显示按钮的文字)
                'height' : 10,
//              'width' : 200,//按钮的宽和高
                'auto' : false,//是否自动上传
                'multi' : true,//支持多个
                'file_types': '*.png;*.jpg',//允许的格式 ,下拉列表只显示此类型的文件（上传文件类型）
                'file_size_limit' : 10000,//文件大小（文件大小）
                'file_queue_limit' : 10,//允许一次上传个数
                'rollover' : true,
                'onSelect':function(file){//选择文件的时候
                },
                'onQueueComplete' : function(queueData) {//当队列中的所有文件上传成功后，弹出共有多少个文件上传成功
                    //top.$.messager.alert("提示信息：", '上传成功!', "info");
                },
                'onDisable' : function() {
                },//在调用disable方法时候触发
                'onCancel' : function() {//取消上传的时候
                },
                'onUploadStart' : function(file) {//开始上传的时候
                },
                'onError' : function(errorType, errObj) {//有错误的时候
                    $.messager.alert("提示信息：", '错误: ' + errObj.info,"error");//($.messager.alert是easyui的写法)
                },
                'onUploadSuccess' : function(file,data,response) {//当上传成功后，弹出文件的提示
                    alert("data=" + data);//data内容是后台返回给前台的信息
                }
            });
}

 </script>

（3）html部分

这里写图片描述

<body>
    <form>
        <div id="fileQueue3"></div>//显示文件上传进度
        <input id="file_upload" name="file_upload" type="file" multiple="true" value="上传" class="easyui-linkbutton">//点击此按钮 会弹出上传框
         <a href="javascript:$('#file_upload').uploadify('upload','*')">上传</a>//如果前面js设置了 auto:false，就不会自动上传了，点击此按钮就可以上传了。如果设置为true，是自动上传
        <a href="javascript:$('#file_upload').uploadify('stop')">取消所有
    </form>
</body>

4.java部分（FielServlet）

public class MySevlet extends HttpServlet {//继承HttpServlet

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
        throws ServletException, IOException {
    // TODO Auto-generated method stub
    super.doGet(req, resp);
}

//前面js中method:post则会调用这个
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    //设置编码
    response.setContentType("text/html;charset=utf-8") ;
    request.setCharacterEncoding("utf-8" ) ;

    //文件上传的工具类
    ServletFileUpload upload = null ;
    //返给前台成功或失败的信息
    String return_msg = null ;

    try{
        //实例化工具类
        upload = new ServletFileUpload(new DiskFileItemFactory()) ; 
        //得到文件（流）的集合
        List list = upload.parseRequest(request) ;

        //遍历
        for(int i = 0 , j = list.size() ; i < j ; i++){
            //得到第一个文件对象
            Object obj = list.get(i) ;
            //如果是DiskFileItem的实例，则是我们需要的文件
            if(obj instanceof DiskFileItem){
                //强转
                DiskFileItem diskfile = (DiskFileItem)obj;
                //得到上传的文件名。如果上传a.jpg，那name2就等于 a
                String name2 = diskfile.getName();

                //有的DiskFileItem 不是我们上传的文件，而是其他信息，name是null
                //如果name不是null，则是我们要的文件
                if(name2 != null){
                    //f1是在本web工程中存储图片
                    File f1 = new File(this.getServletContext().getRealPath("/") + "/jpgs/");
                    //如果不存在本目录，生成
                    if(!f1.exists()){
                        f1.mkdir();
                    }else{
                        System.out.println(f1.getPath());
                    }
                    //得到上传文件的输出流
                    FileOutputStream file1 = new FileOutputStream( this.getServletContext().getRealPath("/") + "/jpgs/" + name2) ;

                    //***************************
                    //f2是在硬盘上的路径
                    //--/jpgs/会生成d://jpgs
                    File f2 = new File("/jpgs/");
                    if(!f2.exists()){
                        f2.mkdir();
                    }else{
                        System.out.println(f2.getPath());
                    }
                    FileOutputStream file2 = new FileOutputStream("/jpgs/"+ name2) ;
                    //Streams.copy相当于流的read和write操作
                    Streams.copy(diskfile.getInputStream(), file1, true);
                    Streams.copy(diskfile.getInputStream(), file2, true);
                }
            }
        }

        //文件保存成功
        return_msg = "文件保存成功" ;
    }catch(Exception e){
        e.printStackTrace();
        //文件保存失败
        return_msg = "文件保存失败：" + e.getMessage() ;
    }
    //把消息返回给前台页面
    /*对应前面js的'onUploadSuccess'------alert("data=" + data);//data内容是后台返回给前台的信息
*/

        response.getWriter().write(return_msg) ;
        response.getWriter().close() ;
    }


}

5.页面效果

这里写图片描述

点击完上传会在相应文件夹生成文件

zhshchilss

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
uploadify java上传图片

1.导入jar包commons-fileupload-1.2.2.jar commons-io-2.0.1.jar servlet-api.jar2.导入uploadify相关js和css3.配置web.xml里的servlet<servlet> <servlet-name>FileServlet</servlet-name> <servlet-class>com
复制链接

扫一扫