jquery uploadify的使用

发布时间：2020-04-09 11:59:14 阅读：2209 作者：davenzeng 栏目：web开发

前端开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

由于项目是存储图片的，要使用到上传的功能，而且个人想做好点。所以在网上搜了下资料，觉得这个jquery 的插件还不错。

首先放个工程的分布图

jquery uploadify的使用

项目是拿以前搭建好的SSH的框架，不过里面只用到struts2。

用到的jar的话大家自己去下载吧。jquery uploadify的版本是2.1.4的。

index.jsp下面的代码是

<!DOCTYPE HTML > <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%     String path = request.getContextPath();     String basePath = request.getScheme() + "://" + request.getServerName() + ":"             + request.getServerPort() + path + "/"; %> <html>     <head>         <base href="<%=basePath%>">         <title>首页</title>     </style> <script type="text/javascript" src="js/jquery-1.6.js"></script> <script type="text/javascript" src="uploadify/jquery.uploadify.v2.1.4.js"></script> <script type="text/javascript" src="uploadify/swfobject.js"></script> <link rel="stylesheet" type="text/css" href="uploadify/uploadify.css">      <script type="text/javascript">           $(document).ready(function() {             $("#uploadify").uploadify({                 'uploader'       : 'uploadify/uploadify.swf',   //flash，上传时的显示                 'script'         : 'show.action',               //提交处理的地址，默认是php的                 'fileDataName'   : 'file',                      //在处理的地址接收的名字                 'cancelImg'      : 'uploadify/cancel.png',      //上传时的取消按钮                 'folder'         : '/p_w_picpath',                    //上传放到服务器的哪个路径，（一开始的时候可以的，但是后来不知道修改了什么就在后台也要加上这个文件夹了，那样这个属性就没意思了）                 'queueID'        : 'upLoadDiv',                 //显示附件在哪个DIV                 'fileDesc'       : '图片文件',                  //选择文件的最后一个框框显示的提示                 'fileExt'        : '*.jpg;*.png;*.bmp',         //只允许什么类型的文件上传                 'sizeLimit'      : 1024*1024*1,                 //上传文件的大小byte单位的如果是在struts2上面用的话，要在struts.xml里面加上<constant name="struts.multipart.maxSize" value="9999999999999999"></constant>                 'queueSizeLimit' : 2,                           //最多可以选择多少个文件                 'auto'           : false,                       //自动上传                 'multi'          : true,                        //多文件上传                 'simUploadLimit' : 2,                           //一次上传多少个文件                 'buttonText'     : 'BROWSE',                    //上传的button文字                // 'scriptData'   :{'name':'xxx','id':'sss'},    //参数json类型                 //'method'       :'get',                        //提交方法类型，默认post，有参数就要get                              'onError'       :function(event,queueID,fileObj,errorObj){                             //一般这个的话会在上传上来文件的那个div上显示，但出来的错误是英文的                             alert("文件:"+fileObj.name+"上传失败!失败的原因是:"+errorObj.type);                 },                 'onAllComplete'  :function(event,data){//ajax返回，所有文件上传之后的回调                     alert("一共上传："+data.filesUploaded+"个文件,错误数："+data.errors+".上传速度："+data.speed+"kb/s");                 }             });           });       </script>     </head>    <body>           <div id="upLoadDiv"></div>           <input type="file" name="uploadify" id="uploadify" />  <br><br>          <a href="javascript:$('#uploadify').uploadifyUpload()">上传</a>         <a href="javascript:$('#uploadify').uploadifyClearQueue()">取消所有上传</a>   </body>  </html>

struts.xml里面的代码挺少的

struts2默认文件上传的大小是2M，大于2M的上传不了。所以我们要设置一下。

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd"> <struts>     <constant name="struts.multipart.maxSize" value="9999999999999999"></constant>     <package name="default" extends="struts-default" namespace="/">         <action name="show" class="com.mark.action.Show" method="uploadImg">         </action>     </package> </struts>

Action类里面的代码：

导包的话大家自己导吧。

public class Show {      private File file; // 前台传过来的文件     private String fileFileName; // 文件名     private String fileContentType; // 文件类型      public void uploadImg() throws IOException  {         HttpServletResponse response = ServletActionContext.getResponse();         HttpServletRequest request = ServletActionContext.getRequest();         // 写到服务器上         response.setCharacterEncoding("utf-8");         try {         String path = request.getRealPath("/p_w_picpath");         FileInputStream in = new FileInputStream(file);         FileOutputStream out = new FileOutputStream(new File(path + "/" + fileFileName));         byte[] b = new byte[1024];         while ((in.read(b) > -1)) {             out.write(b);         }         in.close();         out.close();         response.getWriter().write("上传成功！");         }catch (Exception e) {             e.printStackTrace();             response.getWriter().write("上传失败!请联系管理员或者重新上传！");         }     }      public File getFile() {         return file;     }      public void setFile(File file) {         this.file = file;     }      public String getFileFileName() {         return fileFileName;     }      public void setFileFileName(String fileFileName) {         this.fileFileName = fileFileName;     }      public String getFileContentType() {         return fileContentType;     }      public void setFileContentType(String fileContentType) {         this.fileContentType = fileContentType;     } }