脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery文件上传插件Uploadify使用指南,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。
对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持
Flash,主要特性:支持多文件上传、HTML5版本可拖拽上传、实时上传进度条显示、强大的参数
定制功能,如文件大小、文件类型、按钮图片定义、上传文件脚本等。
Flash版本使用方法:
1.加载JS和CSS
. 代码如下:
<script src="jquery/1.7.1/jquery.min.js" tyPE="text/javascript"></script>
<script src="jquery.uploadify.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="uploadify.css">
2.编写HTML内容
. 代码如下:
<form>
<p id="queue"></p>
<input id="file_upload" name="file_upload" type="file" multiple="true">
</form>
. 代码如下:
<script type="text/javascript">
$(document).ready(function()
{
$("#file_upload").uploadify({
'uploader': 'uploadify.swf',
'script': 'UploadHandler.php',
'folder': 'UploaDFile',
'queueiD': 'fileQueue',
'auto': true,
';multi': true
});
});
</script>
4.更多参数配置详解
uploader : uploadify.swf 文件的相对路径,该swf文件是一个带有文字brOWSE的按钮,点击后淡出
打开文件对话框,默认值:uploadify.swf。
script : 后台处理程序的相对路径 。默认值:uploadify.php
checkScript :用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径
fileDataName :设置一个名字,在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata
method : 提交方式Post 或Get 默认为Post
scriptAccess :flash脚本文件的访问模式,如果在本地测试设置为always,默认值:sameDomain
folder : 上传文件存放的目录 。
queueID : 文件队列的ID,该ID与存放文件队列的p的ID一致。
queueSizeLimIT : 当允许多文件生成时,设置选择文件的个数,默认值:999 。
multi : 设置为true时可以上传多个文件。
auto : 设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传 。
fileDesc : 这个属性值必须设置fileExt属性后才有效,用来设置选择文件对话框中的提示文本,如设
置fileDesc为“请选择rar doc PDF文件”
fileExt : 设置可以选择的文件的类型,格式如:'*.doc;*.pdf;*.rar' 。
sizeLimit : 上传文件的大小限制 。
simUploadLimit : 允许同时上传的个数 默认值:1 。
buttonText : 浏览按钮的文本,默认值:BROWSE 。
buttonimg : 浏览按钮的图片的路径 。
hideButton : 设置为true则隐藏浏览按钮的图片 。
rollover : 值为true和false,设置为true时当鼠标移到浏览按钮上时有反转效果。
width : 设置浏览按钮的宽度 ,默认值:110。
height : 设置浏览按钮的高度 ,默认值:30。
wmode : 设置该项为transparent 可以使浏览按钮的flash背景文件透明,并且flash文件会被置为页
面的最高层。 默认值:opaque 。
cancelImg :选择文件到文件队列中后的每一个文件上的关闭按钮图标
上面介绍的key值的value都为字符串或是布尔类型,比较简单,接下来要介绍的key值的value为一个函数,可以在选择文件、出错或其他一些操作的时候返回一些信息给用户。
onInit : 做一些初始化的工作
onSelect :选择文件时触发,该函数有三个参数
event:事件对象。
queueID:文件的唯一标识,由6为随机字符组成。
fileObj:选择的文件对象,有name、size、creationDate、modificationDate、type 5个属性。
代码如下:
. 代码如下:
<script type="text/javascript">
$(document).ready(function()
{
$("#uploadify").uploadify({
'uploader': 'JS/jquery.uploadify-v2.1.0/uploadify.swf',
'script': 'UploadHandler.ashx',
'cancelImg': 'JS/jquery.uploadify-v2.1.0/cancel.png',
'folder': 'UploadFile',
'queueID': 'fileQueue',
'auto': false,
'multi': true,
'onInit':function(){alert("1");},
'onSelect': function(e, queueId, fileObj)
{
alert("唯一标识:" + queueId + "/r/n" +
"文件名:" + fileObj.name + "/r/n" +
"文件大小:" + fileObj.size + "/r/n" +
"创建时间:" + fileObj.creationDate + "/r/n" +
nbsp; "最后修改时间:" + fileObj.modificationDate + "/r/n" +
"文件类型:" + fileObj.type
);
}
});
});
</script>
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery文件上传插件Uploadify使用指南全部内容,希望文章能够帮你解决javascript代码实例教程-jQuery文件上传插件Uploadify使用指南所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。