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 相关文章推荐
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
Mar 15 Javascript
JavaScript中setUTCFullYear()方法的使用简介
Jun 12 Javascript
JavaScript实现把数字转换成中文
Jun 29 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
关于JSON与JSONP简单总结
Aug 16 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
javascript判断回文数详解及实现代码
Feb 03 Javascript
js a标签点击事件
Mar 30 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
js实现会跳动的日历效果(完整实例)
Oct 18 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实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
PHP7新增函数
2021/03/09 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
2008/03/22 Javascript
js null undefined 空区别说明
2010/06/13 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
node.js实现爬虫教程
2020/08/25 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
django+js+ajax实现刷新页面的方法
2017/05/22 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
pytorch 改变tensor尺寸的实现
2020/01/03 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
Django model.py表单设置默认值允许为空的操作
2020/05/19 Python
Keras设置以及获取权重的实现
2020/06/19 Python
通过Python实现Payload分离免杀过程详解
2020/07/13 Python
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
小型女装店的创业计划书
2014/01/09 职场文书
预备党员转正思想汇报
2014/01/12 职场文书
销售助理岗位职责
2014/02/21 职场文书
环境保护建议书
2014/08/26 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
2019年家电促销广告语集锦
2019/10/21 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript