uploadify多文件上传参数设置技巧


Posted in Javascript onNovember 16, 2015

比起swfupload,uploadify插件配置使用都更简单,只是刚加载的时候稍微慢了一秒左右.

废话不多说了,直接给大家贴代码了。

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>php jquery uploadify多文件上传</title>
<link href=”css/default.css” rel=”stylesheet” type=”text/css” />
<link href=”css/uploadify.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”js/jquery-1.3.2.min.js”></script>
<script type=”text/javascript” src=”js/swfobject.js”></script>
<script type=”text/javascript” src=”js/jquery.uploadify.v2.1.0.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$(“#fileInput2″).uploadify({
‘uploader': ‘js/uploadify.swf',//所需要的flash文件
‘cancelImg': ‘cancel.png',//单个取消上传的图片
'script': ‘js/uploadify.php',//实现上传的程序
‘folder': ‘uploads',//服务端的上传目录
//'auto': true,//自动上传
‘multi': true,//是否多文件上传
//'checkScript': ‘js/check.php',//验证 ,服务端的
‘displayData': 'speed',//进度条的显示方式
//'fileDesc': ‘Image(*.jpg;*.gif;*.png)',//对话框的文件类型描述
//'fileExt': ‘*.jpg;*.jpeg;*.gif;*.png',//可上传的文件类型
//'sizeLimit': 999999 ,//限制上传文件的大小
//'simUploadLimit' :3, //并发上传数据
//'queueSizeLimit' :5, //可上传的文件个数
//'buttonText' :'文件上传',//通过文字替换钮扣上的文字
‘buttonImg': ‘css/images/browseBtn.png',//替换上传钮扣
‘width': 80,//buttonImg的大小
‘height': 24,//
‘rollover': true,//button是否变换
onComplete: function (evt, queueID, fileObj, response, data) {
//alert(“Successfully uploaded: “+fileObj.filePath);
//alert(response);
getResult(response);//获得上传的文件路径
}
//onError: function(errorObj) {
// alert(errorObj.info+” “+errorObj.type);
//}
});
});
</script>
<script type=”text/javascript”>
function getResult(content){
//通过上传的图片来动态生成text来保存路径
var board = document.getElementById(“divTxt”);
board.style.display=””;
var newInput = document.createElement(“input”);
newInput.type = “text”;
newInput.size = “45″;
newInput.name=”myFilePath[]“;
var obj = board.appendChild(newInput);
var br= document.createElement(“br”);
board.appendChild(br);
obj.value=content;
}
</script>
</head>
<body>
<fieldset style=”border: 1px solid #CDCDCD; padding: 8px; padding-bottom:0px; margin: 8px 0″>
<legend> <strong> 多文件上传</strong></legend>
<div>
<input id=”fileInput2″ name=”fileInput2″ type=”file” />
<input type=”button” value=”确定上传” onclick=”javascript:$(‘#fileInput2′).uploadifyUpload();”>  
||  <a href=”javascript:$(‘#fileInput2′).uploadifyClearQueue();”>清除上传列表</a></div>
<p></p>
</fieldset>
<FORM name=”form2″ METHOD=POST ACTION=”db.php”>
 <div id=”divTxt” style=”display:none”><span style=”color:red”><strong>已经上传的图片有:</strong></span& gt;<br></div><br>
<INPUT TYPE=”submit” value=”提 交”>
</FORM>
</body>
</html>

ps:uploadify插件实现多个图片上传并预览

使用uploadify插件可方便实现图片上传功能。兼容ie6、ie7。

上传成功之后使用插件的回调函数读取json数据,根据url实现图片预览。

效果图:

uploadify多文件上传参数设置技巧

点击浏览文件上传图片,图片依次在右侧显示预览效果。

实现:

json数据格式如下:

uploadify多文件上传参数设置技巧

页面代码如下:

注:需要引用jQuery.js、uploadify.js、uploadify文件。。uploadify文件下载地址:http://www.uploadify.com/download/

<html>
<head>
<script type="text/javascript" src="static/js/jquery.js">"></script>
<script type="text/javascript" src="static/js/jquery.select.js">"></script>
</head>
<body>
<div class="file-box"> 
            <div id="divPreview">
              <span style="float:left">(最多可上传五张图片)</span>
            </div>
            <input type="file" name="file" class="file" id="fileField" /> 
            <input type="hidden" name="hash" id="hash" value="xoxo"/> 
</div> 
<script>
$(function() {
  $("#fileField").uploadify({
    'height'    : 30,
    'swf'    : '<?php echoYii::app()->request->baseUrl ?>/static/uploadify/uploadify.swf?var='+(newDate()).getTime(),
    'uploader'   :'index.php?r=upload/uploadimage',
    'width'     : 120,
    'onUploadSuccess' : function(file, data, response) {
      var info = eval("("+data+")");
      if(info.err==1){alert(info.msg);}                    //如果图片过大或者格式错误弹出错误信息
      else{
      $("#divPreview").append($("<img src='" + info.img + "'/>"));
      $("#divPreview").append($("<input type='hidden' name='imgId[]' value='" + info.imgId + "'/>"));
      }
    },
    'buttonText'  : '浏览文件',
    'uploadLimit'  : 5,                                   //上传最多图片张数
    'removeTimeout' : 1,
    'preventCaching': true,                              //不允许缓存
    'fileSizeLimit' : 4100,                               //文件最大
    'formData'   : { '<?php echosession_name();?>' : '<?php echosession_id();?>','hash':$("#hash").val() }      //hash
  });
  $("#SWFUpload_0").css({         //设置按钮样式,根据插件文档进行修改
            'position' :'absolute',
            'top': 20,
            'left': 35,
            'z-index' : 1
          });
});
</script>
</body>
</html>

曾遇到问题:

ie、360浏览器中对json数据检查比较严格,不允许最后一个“,”存在。其它浏览器不会报错,需要注意。

Javascript 相关文章推荐
如何实现浏览器上的右键菜单
Jul 10 Javascript
JavaScript 在线压缩和格式化收藏
Jan 16 Javascript
基于jQuery的公告无限循环滚动实现代码
May 11 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
Oct 24 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
AnjularJS中$scope和$rootScope的区别小结
Sep 18 Javascript
浅析JS中常用类型转换及运算符表达式
Jul 23 Javascript
JS中判断字符串存在和非空的方法
Sep 12 Javascript
React项目动态设置title标题的方法示例
Sep 26 Javascript
vue element中axios下载文件(后端Python)
May 10 Javascript
js中的this的指向问题详解
Aug 29 Javascript
JavaScript函数柯里化
Nov 07 Javascript
跟我学习javascript的var预解析与函数声明提升
Nov 16 #Javascript
跟我学习javascript的全局变量
Nov 16 #Javascript
浅析JavaScript访问对象属性和方法及区别
Nov 16 #Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 #Javascript
简单实现限制uploadify上传个数
Nov 16 #Javascript
跟我学习javascript的隐式强制转换
Nov 16 #Javascript
跟我学习javascript的浮点数精度
Nov 16 #Javascript
You might like
php实现RSA加密类实例
2015/03/26 PHP
几个优化WordPress中JavaScript加载体验的插件介绍
2015/12/17 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
jquery 事件执行检测代码
2009/12/09 Javascript
Jquery 表格合并的问题分享
2011/09/17 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
2011/10/13 Javascript
jQuery背景插件backstretch使用指南
2015/04/21 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
微信JS接口大全
2016/08/25 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
Django小白教程之Django用户注册与登录
2016/04/22 Python
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
python 获取网页编码方式实现代码
2017/03/11 Python
python机器学习之神经网络(一)
2017/12/20 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
python unittest实现api自动化测试
2018/04/04 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
python Tcp协议发送和接收信息的例子
2019/07/22 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例
2020/02/28 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
六十岁生日答谢词
2014/01/10 职场文书
单位办理社保介绍信
2014/01/10 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
农民工讨薪标语
2014/06/26 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python