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 相关文章推荐
jQuery前台数据获取实现代码
Mar 16 Javascript
JS图片无缝滚动(简单利于使用)
Jun 17 Javascript
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 Javascript
原生js实现模拟滚动条
Jun 15 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
深入理解JavaScript中的预解析
Jan 04 Javascript
Node.js五大应用性能技巧小结(必须收藏)
Aug 09 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
微信小程序webSocket的使用方法
Feb 20 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学习之 循环结构实现代码
2011/06/09 PHP
深入php常用函数的使用汇总
2013/06/08 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
js jquery验证银行卡号信息正则学习
2013/01/21 Javascript
jQuery获取浏览器中的分辨率实现代码
2013/04/23 Javascript
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
js和jquery中循环的退出和继续学习记录
2014/09/06 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
解决vue-cli脚手架打包后vendor文件过大的问题
2018/09/27 Javascript
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
vue实例的选项总结
2020/06/09 Javascript
[02:44]2014DOTA2 国际邀请赛中国区预选赛 大神红毯秀
2014/05/25 DOTA
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
Python科学计算之NumPy入门教程
2017/01/15 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
Python多线程threading创建及使用方法解析
2020/06/17 Python
django教程如何自学
2020/07/31 Python
PyCharm最新激活码PyCharm2020.2.3有效
2020/11/18 Python
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
C面试题
2015/10/08 面试题
历史学专业毕业生求职信
2013/09/27 职场文书
留学生如何写好自荐信
2013/12/27 职场文书
经销商订货会主持词
2014/03/27 职场文书
《社戏》教学反思
2014/04/15 职场文书
岗位标兵事迹材料
2014/05/17 职场文书
分公司任命书
2014/06/06 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
2015年暑期社会实践总结
2015/07/13 职场文书
详解Python为什么不用设计模式
2021/06/24 Python