基于jquery.uploadify实现图片上传

最新推荐文章于 2021-03-09 18:47:25 发布
最新推荐文章于 2021-03-09 18:47:25 发布
阅读量682 收藏
点赞数
分类专栏： java

效果图：


调用说明

1、JSP页面HTML标签，如下添加




2、需要在jsp页面，添加脚本，调用API接口如下：

[javascript]  view plain  copy
  1.        var uploadifyItems = [  
  2.     {render:'#uploadify1',fileQueue:'fileQueue1',modelType:'1',imgTarget:'#portraitImg',inputTarget:'#portraitUrl',imgMaxWidth:295,imgMaxHeight:295,newFile:"portraitImg"+Util.getDateTime(6)+Util.UUID(32,16)},  
  3.     {render:'#uploadify2',fileQueue:'fileQueue2',modelType:'9',imgTarget:'#idCardImgView',inputTarget:'#idCardImg',newFile:"idCardImg"+Util.getDateTime(6)+Util.UUID(32,16)},  
  4.     {render:'#uploadify3',fileQueue:'fileQueue3',modelType:'9',imgTarget:'#duplicateIdentityImg',inputTarget:'#duplicateIdentityUrl',newFile:"duplicateIdentityUrl"+Util.getDateTime(6)+Util.UUID(32,16)},  
  5.     {render:'#uploadify4',fileQueue:'fileQueue4',modelType:'9',imgTarget:'#holdIdentityImg',inputTarget:'#holdIdentityUrl',newFile:"holdIdentityUrl"+Util.getDateTime(6)+Util.UUID(32,16)},  
  6.     {render:'#uploadify5',fileQueue:'fileQueue5',modelType:'4',imgTarget:'#licenseImg',inputTarget:'#licenseUrl',newFile:"licenseUrl"+Util.getDateTime(6)+Util.UUID(32,16)},  
  7.     {render:'#uploadify6',fileQueue:'fileQueue6',modelType:'4',imgTarget:'#licenseCopyImg',inputTarget:'#licenseCopyUrl',newFile:"licenseCopyUrl"+Util.getDateTime(6)+Util.UUID(32,16)}  
  8. ];  
  9. UploadifyUtils.image.config({  
  10.     ftpServer:FTP_SERVER  
  11. });  
  12. UploadifyUtils.image.init(uploadifyItems);  



上述参数说明：

参数
说明 
UploadifyUtils.image.config
json，具体详见默认参数。其中ftpServer为图片上传的ftp地址
UploadifyUtils.image.init

json数组，其中：

render：上传控件绑定的div元素，参数值为#id。

fileQueue：上传进度条，绑定的div元素，参数值为#id

modelType：图片上传的ftp目录，即ftpUploadPathConfig.properties配置文件中的参数值。

imgTarget：图片上传成功后绑定显示的img元素。

inputTarget：图片上传成功后绑定的input元素，提交表单使用。

imgMaxWidth：图片尺寸最大宽度，-1为不控制大小。

imgMaxHeight：图片尺寸最大高度，-1为不控制大小。

imgMaxSize：图片上传大小 如： 最大1MB，则值取（1*1024*1024）。

newFile:自定义上传图片名称，Y：使用原上传图片名称


 

源码：

[javascript]  view plain  copy
  1.   
[javascript]  view plain  copy
  1. /** 
  2.  * 基于jqueryUploadify插件实现图片上传的工具类 
  3.  * @author 石冬冬 
  4.  * @date 2017/1/18 
  5.  */  
  6. var UploadifyUtils = {  
  7.     /** 
  8.      * 上传图片 
  9.      */  
  10.     image:{  
  11.         /** 
  12.          * 默认配置项 
  13.          */  
  14.         settings:{  
  15.             'ftpServer'         :   '',  
  16.             'swf'               :   CAR_PATH + '/static/controls/jquery.uploadify-v3.1/uploadify.swf',  
  17.             'uploader'          :   CAR_PATH + "/imageUpload/upload.do_?temp="+Math.random(),  
  18.             'queueID'           :   'fileQueue',  
  19.             'fileTypeDesc'      :   '支持格式:jpg/gif/jpeg/png/bmp.',  
  20.             'fileTypeExts'      :   '*.jpg;*.gif;*.jpeg;*.png',  
  21.             'formData'          :   null,  
  22.             'auto'              :   true,  
  23.             'multi'             :   false,  
  24.             'uploadLimit'       :   99,  
  25.             'queueSizeLimit'    :   99,  
  26.             'fileSizeLimit'     :   2*1024*1024,  
  27.             'fileObjName'       :   'imgFile',  
  28.             'buttonText'        :   '选择图片',  
  29.             'removeCompleted'   :   true,  
  30.             'removeTimeout'     :   3,  
  31.             'modelType'         :   11,  
  32.             'imgMaxSize'        :   1024*1024,//默认图片1MB  
  33.             'onUploadSuccess'   :   function(file,data,response) {  
  34.              },  
  35.              'onUploadError'    :   function(file,errorCode,errorMsg,errorString,swfuploadifyQueue) {  
  36.                  layer.msg('上传失败:'+errorMsg, {icon: 2});  
  37.              }  
  38.         },  
  39.         /** 
  40.          * 对外配置入口 
  41.          * @param options 
  42.          */  
  43.         config:function(options){  
  44.             $.extend(this.settings,options);  
  45.         },  
  46.         /** 
  47.          * 初始化插件 
  48.          * @param items 
  49.          */  
  50.         init:function(items){  
  51.             var settings = this.settings;  
  52.             var ftpServer  = settings.ftpServer;  
  53.             for(var i in items){  
  54.                 var $formData = {  
  55.                     'type'          :   'image',  
  56.                     'modelType'     :   11,  
  57.                     'imgMaxWidth'   :   -1,  
  58.                     'imgMaxHeight'  :   -1,  
  59.                     'imgMaxSize'    :   settings.imgMaxSize,  
  60.                     'imgTarget'     :   null,                   //上传成功回调绑定的img元素，如：#identityCardImg  
  61.                     'inputTarget'   :   null,                   //上传成功回调绑定的input元素，一般为hidden类型，如：#identityCardUrl  
  62.                     'imageIndex'    :   0,                      //上传图片索引      
  63.                     'newFile'       :   'Y'                     //系统自动生成文件名称  
  64.                 };  
  65.                 var render = items[i].render;               //上传控件绑定的div元素，参数值为#id。  
  66.                 var modelType = items[i].modelType;         //图片上传的ftp目录，即ftpUploadPathConfig.properties配置文件中的参数值。  
  67.                 var imgTarget = items[i].imgTarget;         //图片上传成功后绑定显示的img元素。  
  68.                 var inputTarget = items[i].inputTarget;     //图片上传成功后绑定的input元素，提交表单使用。  
  69.                 var imgMaxWidth = items[i].imgMaxWidth;     //图片尺寸最大宽度，-1为不控制大小。  
  70.                 var imgMaxHeight = items[i].imgMaxHeight;   //图片尺寸最大高度，-1为不控制大小。  
  71.                 var imgMaxSize = items[i].imgMaxSize;       //图片大小  
  72.                 var newFile = items[i].newFile;  
  73.                 settings.queueID = items[i].queueID;  
  74.                 $.extend($formData,{  
  75.                     'modelType'     :   modelType,  
  76.                     'imgMaxWidth'   :   imgMaxWidth,  
  77.                     'imgMaxHeight'  :   imgMaxHeight,  
  78.                     'imgMaxSize'    :   imgMaxSize,  
  79.                     'imgTarget'     :   imgTarget,          //上传成功回调绑定的img元素，如：#identityCardImg  
  80.                     'inputTarget'   :   inputTarget,        //上传成功回调绑定的input元素，一般为hidden类型，如：#identityCardUrl  
  81.                     'imageIndex'    :   i,                  //上传图片索引  
  82.                     'newFile'       :   newFile  
  83.                 });  
  84.                 settings.formData = $formData;  
  85.                 /** 
  86.                  * 上传成功的回调函数 
  87.                  */  
  88.                 settings.onUploadSuccess = function(file, data, response){  
  89.                     data = $.parseJSON(data);  
  90.                     var error = data.error;  
  91.                     var message = data.message;  
  92.                     var imageUrl = data.url;  
  93.                     if(error==1){  
  94.                         layer.msg(message, {icon: 2});  
  95.                     }else{  
  96.                         imageUrl = imageUrl.replace(ftpServer,'');  
  97.                         if(imageUrl){  
  98.                             $(data.imgTarget).attr('src',data.url);  
  99.                             $(data.inputTarget).val(imageUrl);  
  100.                             if(data.imageIndex){  
  101.                                 var imageIndex = data.imageIndex;  
  102.                                 $('div.ui-artZoom-box').eq(imageIndex).find('img').attr('src',data.url);//兼容图片重新上传后，放大图片导致还是原先图片现象。  
  103.                             }  
  104.                         }  
  105.                     }  
  106.                 };  
  107.                 $(render).uploadify(settings);  
  108.             }  
  109.         }  
  110.     }  
  111. };  



SpringMVC 后台java处理FTP上传源码：


[java]  view plain  copy
  1. package com.ucar.base.upload.controller;  
  2.   
  3. import java.awt.image.BufferedImage;  
  4. import java.io.ByteArrayInputStream;  
  5. import java.io.IOException;  
  6. import java.io.InputStream;  
  7. import java.text.SimpleDateFormat;  
  8. import java.util.ArrayList;  
  9. import java.util.Arrays;  
  10. import java.util.Date;  
  11. import java.util.List;  
  12. import java.util.Map;  
  13. import java.util.Properties;  
  14. import java.util.UUID;  
  15.   
  16. import javax.imageio.ImageIO;  
  17. import javax.servlet.http.HttpServletRequest;  
  18. import javax.servlet.http.HttpServletResponse;  
  19.   
  20. import org.apache.commons.fileupload.FileItem;  
  21. import org.apache.commons.lang.StringUtils;  
  22. import org.slf4j.Logger;  
  23. import org.slf4j.LoggerFactory;  
  24. import org.springframework.stereotype.Controller;  
  25. import org.springframework.web.bind.annotation.RequestMapping;  
  26. import org.springframework.web.multipart.MultipartFile;  
  27. import org.springframework.web.multipart.MultipartHttpServletRequest;  
  28. import org.springframework.web.multipart.commons.CommonsMultipartFile;  
  29.   
  30. import com.alibaba.fastjson.JSON;  
  31. import com.alibaba.fastjson.JSONObject;  
  32. import com.ucar.base.upload.utils.UploadConfigUtils;  
  33. import com.ucar.base.upload.utils.UploadConfigUtils.ResourceType;  
  34. import com.ucar.util.StringTools;  
  35. import com.zuche.framework.remote.RemoteClientFactory;  
  36. import com.zuche.framework.remote.RemoteType;  
  37. import com.zuche.framework.upload.ResourceUploadResultVO;  
  38. import com.zuche.framework.upload.ResourceUploadScaleVO;  
  39. import com.zuche.framework.upload.ResourceUploadVO;  
  40. import com.zuche.framework.utils.FtpUtil;  
  41. import com.zuche.framework.utils.PropertiesReader;  
  42.   
  43. /** 
  44.  * 图片上传，基于jqueryUploadify 处理 
  45.  * @author 石冬冬-Heil Hilter(dd.shi02@zuche.com) 
  46.  * @date 2017-1-18 下午4:41:06 
  47.  */  
  48. @Controller  
  49. @RequestMapping("/imageUpload")  
  50. public class ImageUploadController{  
  51.     private static Logger LOGGER = LoggerFactory.getLogger(ImageUploadController.class);  
  52.     private static String[] FILE_TYPES = {"gif","jpg","jpeg","png","bmp"};   
  53.     private static final String FTP_SERVER = UploadConfigUtils.getFtpServer();  
  54.     private static final Properties ftpPathConfig = PropertiesReader.getProperties("ftpUploadPathConfig");  
  55.     /** 
  56.      * Description:图片上传  
  57.      * @Version1.0 2015-12-24 上午9:40:53 by 石冬冬-Chris Suk（dd.shi02@zuche.com）创建 
  58.      * @param request 
  59.      * @param response 
  60.      */  
  61.     @RequestMapping("/upload")  
  62.     public void upload(HttpServletRequest request, HttpServletResponse response){  
  63.         JSONObject resultJSON = new JSONObject();  
  64.         String message = "";  
  65.         int error = 0;  
  66.         String imageUrl = "";  
  67.         String fileName = null,fileType=null,modelType=null;//上传图片名称，文件类型  
  68.         String imgTarget = null,inputTarget=null;  
  69.         String imageIndex = null;  
  70.         String cloud = null;//是否启动cloud存储  
  71.         boolean verify = true;  
  72.         ByteArrayInputStream in = null;  
  73.         String newFile = "N";//是否系统生成文件名{Y:系统生成 N:原文件，自定义名称}  
  74.         try {  
  75.             response.setContentType("text/html;charset=UTF-8");  
  76.             if (!(request instanceof MultipartHttpServletRequest)) {  
  77.                 verify = false;  
  78.                 error=1;  
  79.                 message = "无法获取上传的文件!";  
  80.             }  
  81.             MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;  
  82.             Map<String,Object> uploadParams = multipartRequest.getParameterMap();  
  83.             Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();  
  84.             String imgMaxSize = getUploadParam(uploadParams,"imgMaxSize");  
  85.             newFile =  getUploadParam(uploadParams,"newFile");  
  86.             modelType = getUploadParam(uploadParams,"modelType");  
  87.             imgTarget = getUploadParam(uploadParams,"imgTarget");  
  88.             inputTarget = getUploadParam(uploadParams,"inputTarget");  
  89.             imageIndex  = getUploadParam(uploadParams,"imageIndex");  
  90.             cloud = getUploadParam(uploadParams,"cloud");  
  91.               
  92.             CommonsMultipartFile item = (CommonsMultipartFile) fileMap.get("imgFile");  
  93.             long imgSize = item.getSize();  
  94.             in = new ByteArrayInputStream(item.getBytes());  
  95.             FileItem fileItem = item.getFileItem();  
  96.             fileName = fileItem.getName();  
  97.             fileType = fileName.substring(fileName.lastIndexOf(".")+1).toLowerCase();  
  98.             if(!Arrays.asList(FILE_TYPES).contains(fileType)){  
  99.                 verify = false;  
  100.                 error=1;  
  101.                 message = "图片只支持gif,jpg,jpeg,png,bmp文件类型";  
  102.             }  
  103.             if(StringTools.isNotEmpty(imgMaxSize) && imgSize>Long.valueOf(imgMaxSize)){  
  104.                 verify = false;  
  105.                 error=1;  
  106.                 message = String.format("图片大小不能大于%s", formateImageSize(Long.valueOf(imgSize)));  
  107.             }  
  108.             if(verify){  
  109.                 FtpUtil ftpUtil = FtpUtil.getInstance();  
  110.                 ftpUtil.connectServer();  
  111.                 String modelTypePath = ftpPathConfig.getProperty(modelType);  
  112.                 String uploadPath = modelTypePath + (modelTypePath.endsWith("/") ? "" : "/" )  + getFtpRemoteFileDir();  
  113.                 String ftpUploadPath = uploadPath;  
  114.                 String chkMsg = verifyImg(uploadParams, in);  
  115.                 if(StringUtils.isNotEmpty(chkMsg)){  
  116.                     message = chkMsg;  
  117.                     error=1;  
  118.                     verify = false;  
  119.                 }else{  
  120.                     in.reset();  
  121.                     String ftpFileName = UUID.randomUUID().toString()+"."+fileType;  
  122.                     if(StringTools.isNotEmpty(newFile) && !"Y".equals(newFile) && !"N".equals(newFile)){  
  123.                         ftpFileName = newFile + "." + fileType;  
  124.                     }else{  
  125.                         if("Y".equals(newFile)){  
  126.                             ftpFileName = fileName;  
  127.                         }  
  128.                     }  
  129.                     boolean flag = ftpUtil.upload(ftpUploadPath, ftpFileName, in);  
  130.                     if (!flag) {  
  131.                         error=1;  
  132.                         message = "图片上传失败";  
  133.                         verify = false;  
  134.                     }  
  135.                       
  136.                     if(StringTools.isEmpty(cloud) || Boolean.valueOf(cloud)){  
  137.                         //同步写入Hbase  
  138.                         /*********************************************/  
  139.                         ResourceUploadVO vo = new ResourceUploadVO();  
  140.                         vo.setName(uploadPath + ftpFileName);  
  141.                         vo.appendImageType(UploadConfigUtils.getCloudUploadModel());  
  142.                         vo.setData(item.getBytes());  
  143.                         vo.setCompress(true);  
  144.                         vo.setCompressSize(10);   
  145.                         List<ResourceUploadScaleVO> list = new ArrayList<ResourceUploadScaleVO>();  
  146.                         ResourceUploadScaleVO scaleVO = new ResourceUploadScaleVO("small", 500, 500,null,true);  
  147.                         list.add(scaleVO);  
  148.                         vo.setScaleInfos(list);  
  149.                         final String SERVICE_NAME = "carresources.commonResourceInsert.service";  
  150.                         ResourceUploadResultVO resultVO = (ResourceUploadResultVO) RemoteClientFactory.getInstance(RemoteType.HESSIAN).executeToObject(SERVICE_NAME, vo);  
  151.                         String cloudServer = UploadConfigUtils.getCloudServer();  
  152.                         LOGGER.error("cloudServer={},resourceUploadResultVO={}",cloudServer,JSON.toJSON(resultVO));  
  153.                         //LOGGER.error("uploadOrigPath={},uploadCompressPath={}",cloudServer+resultVO.getOriginalName(),cloudServer+resultVO.get);  
  154.                         /*********************************************/  
  155.                         imageUrl = UploadConfigUtils.getCloudPath(ResourceType.IMAGE) + uploadPath + ftpFileName;  
  156.                     }else{  
  157.                         imageUrl = FTP_SERVER + uploadPath + ftpFileName;  
  158.                     }  
  159.                 }  
  160.                 if(verify){  
  161.                     message = "图片上传成功";  
  162.                     error=0;  
  163.                 }  
  164.                 ftpUtil.closeConnect();  
  165.             }  
  166.         }catch (Exception e) {  
  167.             error=1;  
  168.             message = "上传文件失败:"+e.getLocalizedMessage();  
  169.             LOGGER.error(e.getMessage(), e);  
  170.         }finally{  
  171.             try {  
  172.                 if(null!=in){in.close();}  
  173.             } catch (IOException e) {  
  174.                 error=1;  
  175.                 message = "ByteArrayInputStream释放异常:"+e.getLocalizedMessage();  
  176.                 LOGGER.error("ByteArrayInputStream释放异常:", e);  
  177.             }  
  178.         }  
  179.         resultJSON.put("error", String.valueOf(error));  
  180.         resultJSON.put("message", message);  
  181.         resultJSON.put("url", imageUrl);  
  182.         resultJSON.put("fileName", fileName);  
  183.         resultJSON.put("fileType", fileType);  
  184.         resultJSON.put("imgTarget", imgTarget);  
  185.         resultJSON.put("inputTarget", inputTarget);  
  186.         resultJSON.put("imageIndex", imageIndex);  
  187.         try {  
  188.             LOGGER.error(resultJSON.toJSONString());  
  189.             response.getWriter().print(resultJSON.toJSONString());  
  190.         } catch (IOException e) {  
  191.             LOGGER.error(e.getMessage(), e);  
  192.         }  
  193.     }  
  194.     /** 
  195.      * Description: 获取图片上传目录 
  196.      * @Version1.0 2015-12-22 上午10:58:35 by 石冬冬-Chris Suk（dd.shi02@zuche.com）创建 
  197.      * @return 
  198.      */  
  199.     private static String getFtpRemoteFileDir() {  
  200.         StringBuilder remoteFileDir = new StringBuilder();  
  201.         SimpleDateFormat sf = new SimpleDateFormat("yyyyMMdd");  
  202.         String datePath = sf.format(new Date());  
  203.         remoteFileDir.append(datePath).append("/");  
  204.         return remoteFileDir.toString();  
  205.     }  
  206.     /** 
  207.      * Description:获取上传参数  
  208.      * @Version1.0 2016-5-5 下午1:25:42 by 石冬冬-Chris Suk（dd.shi02@zuche.com）创建 
  209.      * @param uploadParams 
  210.      * @param key 参数 
  211.      * @return 
  212.      */  
  213.     private static String getUploadParam(Map<String,Object> uploadParams,String key){  
  214.         Object obj = uploadParams.get(key);  
  215.         if(null!=obj){  
  216.             String[] objArray = (String[])obj;  
  217.             return objArray[0];  
  218.         }  
  219.         return null;  
  220.     }  
  221.     /** 
  222.      * Description:图片校验  
  223.      * @Version1.0 2015-12-22 下午5:32:04 by 石冬冬-Chris Suk（dd.shi02@zuche.com）创建 
  224.      * @param uploadParams 
  225.      * @param in 
  226.      * @return 
  227.      */  
  228.     private static String verifyImg(Map<String, Object> uploadParams,InputStream in){  
  229.         String message = null;  
  230.         try {  
  231.             String imgMaxWidth = getUploadParam(uploadParams,"imgMaxWidth");  
  232.             String imgMaxHeight = getUploadParam(uploadParams,"imgMaxHeight");  
  233.             if(null!=imgMaxWidth && null!=imgMaxHeight){  
  234.                 int maxWidth = Integer.parseInt(imgMaxWidth);  
  235.                 int maxHeight = Integer.parseInt(imgMaxHeight);  
  236.                 if(maxWidth==-1||maxHeight==-1){  
  237.                     message = null;  
  238.                 }else{  
  239.                     BufferedImage img = ImageIO.read(in);  
  240.                     int width = img.getWidth();  
  241.                     int height = img.getHeight();  
  242.                     if(width>maxWidth||height>maxHeight){  
  243.                         message = String.format("图片尺寸不符合，尺寸最大为%s×%s", imgMaxWidth,imgMaxHeight);  
  244.                     }  
  245.                 }  
  246.             }  
  247.         } catch (Exception e) {  
  248.             LOGGER.error("【图片导入】图片校验处理异常", e);  
  249.         }  
  250.         return message;  
  251.     }  
  252.       
  253.     private static String formateImageSize(long imgMaxSize){  
  254.         String formate = String.format("%sK", imgMaxSize);  
  255.         final long K = 1024 * 1024,MB = 1024 * K;  
  256.         if(imgMaxSize>K){  
  257.             formate = String.format("%sMB", imgMaxSize/K);  
  258.         }  
  259.         if(imgMaxSize>MB){  
  260.             formate = String.format("%sG", imgMaxSize/MB);  
  261.         }  
  262.         return formate;  
  263.     }  
  264. }  
qq_30848071
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery.uploadify.js 3.2.1
12-26
uploadfiy这个插件是基于js里面的jquery库写的。结合了ajax和flash，实现了这个多线程上传的功能。
jQuery上传文件控件Uploadify使用
热门推荐
期待破茧成蝶
06-28 1万+
Uploadify是JQuery的一个上传插件，支持ajax无刷新上传，多个文件同时上传，上传进行进度显示，删除已上传文件等。 首先应下载jQuery和uploadify插件 jQuery下载地址：http://www.jq22.com/jquery-info122 Uploadify下载地址：http://www.uploadify.com/，Flash Version jsp页面需要引
jquery文件上传控件 Uploadify
weixin_33901926的博客
11-30 326
基于jquery的文件上传控件，支持ajax无刷新上传，多个文件同时上传，上传进行进度显示，删除已上传文件。 要求使用jquery1.4或以上版本，flash player 9.0.24以上。 有两个版本，一个用flash,一个是html5。html5的需要付费~所以这里只说flash版本的用法。   官网：http://www.uploadify.com/ 控件截图： 用法： ...
大文件上传Jquery 插件Uploadify-v2.1.4使用图解
FreshMan
08-23 1549
官方下载官方文档官方演示 1.：首先从官网下载最近版uploadify插件，目前为v2.1.4版本；  2 ：新建项目，或者在自己项目中加入下载文件jquery.uploadify-v2.1.4，再建一个UploadFile文件夹，专门用来存放你上传的文件；  3 ：在项目中添加jqueryUploadHandler.ashx文件用来处理文件的上传。 如下图：
uplodify使用参数说明
congtoulaiguo_dxl的博客
01-11 479
一、属性 属性名称 默认值 说明 auto true 设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传 。 buttonClass ” 按钮样式 buttonCursor ‘hand’ 鼠标指针悬停在按钮上的样子 buttonImage null
附件上传控件，基于jquery.uploadify
04-06
基于jquery.uploadify封装的自定义控件，支持简单引用就能被使用，有源码，控件配置简单。上传文件后可显示文件图标。
基于Jquery插件Uploadify实现实时显示进度条上传图片
10-22
主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料，感兴趣的小伙伴们可以参考一下
jquery.uploadify:基于Flash的多文件上传之jQuery插件（包含www.uploadify.com的Uploadify版本3.2.1版本），包括Flash代码
03-23
基于Flash的多文件上传之jQuery插件（引入www.uploadify.com的Uploadify版本3.2.1版本），包括Flash源码： uploadify / uploadify.fla => Flash CS4的原始码 uploadify / => Flash Builder 4.6的ActionScript项目 ...
Uploadify HTML5 版 / Jquery上传插件 全JS
07-03
Uploadify html5 官网下载 竟然要收费，太可气了，这个是根据官网API做的和uploadify一样基于html5 的上传插件。部署很简单。
jquery_uploadify_v3.2版 jquery.uploadify.js
05-07
jquery_uploadify_v3.2版 jquery.uploadify.js 英文提示汉化
uploadify上传图片
04-24
使用uploadify上传图片（包含uploadify插件）
Uploadify图片上传(C#)
04-10
Uploadify图片上传(文件批量选取，批量上传，带进度条)
uploadify插件实现多个图片上传并预览
12-13
使用uploadify插件可方便实现图片上传功能。兼容ie6、ie7。 上传成功之后使用插件的回调函数读取json数据，根据url实现图片预览。 效果图： 点击浏览文件上传图片，图片依次在右侧显示预览效果。 实现： json数据格式如下： 页面代码如下： 注：需要引用jQuery.js、uploadify.js、uploadify文件。。uploadify文件下载地址 <html> <head> [removed]">[removed] <script type="text/javascrip
Jquery uploadify图片上传插件无法上传的解决方法
10-26
很多的朋友都有遇到Jquery uploadify图片上传插件无法上传的情况，下面为大家介绍下不错的解决方法，感兴趣的朋友可以参考下
Uploadify上传图片案例
探索丶挑战丶突破
08-01 616
上传图片 或附件都使用该接口 Impl @Override public List&lt;Map&lt;String, Object&gt;&gt; saveFileMap(HttpServletRequest request) { if(request instanceof MultipartHttpServletRequest){ MultipartHttpServlet...
Jquery.Uploadify 图片上传使用
hangbingbihai的博客
07-18 1809
                                                                                                Controller @Value("${file.path}") private String filePath; @RequestMapping(value = "/uploadI...
jq php上传图片插件,Uploadify(JQuery上传插件)使用配置详解
weixin_31885123的博客
03-09 417
Uploadify是一个通过JQuery实现的文件上传插件，带有文件上传进度显示的效果。作者在日常工作中经常用到的文件上传插件就是这个，对这个还算是有一定的了解吧，下面就和大家一起分享一下关于如何使用以及如何配置uploadify。下面通过一个简单的示例说明其用法(这里不会用到所有的参数)：Uploadify jquery 文件上传插件使用示例$(function(){$('#uploadify'...
jquery.uploadify.js
最新发布
11-09
jQuery的插件uploadify.js是一个功能强大的文件上传插件。它可以方便地上传文件到后端服务器，并提供了许多可定制的选项和回调函数。 使用uploadify.js，只需在HTML页面中引入jQuery库和uploadify.js的文件，然后在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值