JavaScript插件--Uploadify的使用
来源:互联网 发布:阿里巴巴数据 编辑:程序博客网 时间:2024/05/29 14:08
Uploadify插件的使用
Uploadify是一款优秀的文件上传插件。官方网站是:http://www.uploadify.com/download/
Uploadify目前的版本是3.1.1,下面介绍如何在PHP项目中使用Uploadify插件。
1.下载Uploadify插件,解压后如下图所示:
2.在HTML文件头部包含所需JS文件,CSS文件。记得包含JQuery
(具体路径根据自己的工程来定)
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Js/lib/uploadify/uploadify.css"><script type="text/javascript" src="__PUBLIC__/Js/lib/jquery-1.6.4.min.js"></script><script type="text/javascript"src="__PUBLIC__/Js/lib/uploadify/jquery.uploadify-3.1.min.js"></script>
3.编写Uploadify的配置文件,比如 imageUpload.js
$(function() { $('#photoname').uploadify({ 'swf' : PUBLIC+"/Js/lib/uploadify/uploadify.swf", 'uploader' : PUBLIC+"/Js/lib/uploadify/uploadify.php", 'cancelImg':PUBLIC+"/Js/lib/uploadify/uploadify-cancel.png", 'debug':true, 'buttonText':'选择照片','method':'post','buttonClass': 'upload_button','fileTypeDesc':'图片文件','fileTypeExts':'*.gif;*.jpg;*.png;*.bmp','formData':{'public_path':PUBLIC},'multi':false, 'onUploadComplete':function(file){ },/** * 上传成功后触发事件 */ 'onUploadSuccess' : function(file, data, response) { //参数data保存的是上传后的图片的路径//alert(data);//$('#photo').css("background-color","#f00");var path=PUBLIC+"/Uploads/Photo/"+data;$('#photo>img').attr("src",path);$('#photoname_hidden').val(data); }, }); //alert(PUBLIC);});
关于上面的代码,说明如下:
- swf指明SWF文件路径
- uploader指明后台处理文件路径
- cancelImg指明取消按钮图片路径
- debug开启调试模式
- buttonText按钮上的文字
- method表示上传表单采用的方式
- buttonClass为按钮添加额外的样式类
- fileTypeDesc打开对话框的提示信息
- fileTypeExts允许上传的文件扩展名
- formData上传文件之外额外上传的表单数据
- multi是否支持多文件上传
- onUploadSuccess上传成功后执行的回调函数
4.在HTML中的表单代码片段如下:
<p> <label class="label">照片</label> <table><tr><td> <div id="photo"><img src="__PUBLIC__/Uploads/Photo/default.jpg"/></div> </td></tr></table> <input class="text-input small-input" type="file" name="photo" id="photoname" /></p><input type="hidden" name="photoname" id="photoname_hidden"/>
5.服务器端PHP代码Uploadify.php
<?php$targetFolder = $_POST['public_path'].'/Uploads/Photo/'; //上传的目标路径if (!empty($_FILES)) {$tempFile = $_FILES['Filedata']['tmp_name'];$targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;$targetFile = rtrim($targetPath,'/') . '/' . md5($_FILES['Filedata']['name']);// Validate the file type$fileTypes = array('jpg','jpeg','gif','png','bmp'); // File extensions$fileParts = pathinfo($_FILES['Filedata']['name']);//查看文件的名字符串的编码方式$encode = mb_detect_encoding($targetFile, array("UTF-8","GBK","ASCII","GB2312"));//echo $tempFile.'<br>';//echo $targetFile.'<br>';//echo $encode.'<br>';/*if ($encode == "UTF-8"){$targetFile = iconv("UTF-8","GBK",$targetFile);}*/if (in_array($fileParts['extension'],$fileTypes)) {move_uploaded_file($tempFile,$targetFile);echo md5($_FILES['Filedata']['name']);} else {echo '您好,文件类型不允许!';}}?>
如果上传的文件名含有中文,可以使用mb_detect_encoding查看文件名的编码方式然后转码,由于我把文件名进行md5()了,故无需考虑编码方式了。
---------------------------------------------------------------------------------------------------------------------------
最后看一下实际的页面表现
这里需要注意的是服务端PHP文件中echo出的数据将会出现在客户端Uploadify配置文件uploadImage.js中的onUploadSuccess()事件中的data参数里。可以在onUploadSuccess事件回调函数中 调用alert(data);来查看服务器端脚本的输出信息。
由于我在服务器端脚本中:
echo md5($_FILES['Filedata']['name']);
因此,在JS文件中的UploadSuccess事件中可以更新<img>标签的src属性,来显示刚刚上传的图片。
由于这些数据的传递都是以Ajax方式进行的,故整个过程没有提交页面。如果想把图片文件名通过表单的形式提交,那么不妨加一个hidden类型的input元素。然后还是在onUploadSuccess事件中更新其value即可。
- JavaScript插件--Uploadify的使用
- 了解Uploadify插件的使用
- uploadify上传文件插件的的使用
- tp5下的插件uploadify的使用
- jquery上传插件 uploadify 的使用
- 图片上传插件uploadify的使用
- uploadify和greybox插件的使用
- Thinkphp3.1--uploadify上传插件的使用
- JQuery上传插件Uploadify的简单使用
- JQuery上传插件Uploadify的使用
- Jsp中Uploadify插件的使用(jQuery上传插件)
- Uploadify插件的使用(jQuery上传插件)
- Uploadify插件的使用(jQuery上传插件)
- JSP中Uploadify插件的使用(jQuery上传插件)
- JQuery上传插件Uploadify使用
- JQuery uploadify 上传插件使用
- uploadify上传插件使用(一)
- uploadify上传插件使用(二)
- KeInsertDeviceQueue()
- C++ int,char,string,CString类型转换
- TCP选项详解
- vc 客户端 接收gstramer标准mjpeg
- Android: R cannot be resolved to a variable
- JavaScript插件--Uploadify的使用
- TelephonyManager类:Android手机及Sim卡状态的获取
- js获取url参数值
- FORM开发之Tab Canvas
- linux sd卡驱动分析
- 职能管理,最关键的是找到衡量价值的指标
- linux上使用多个tomcat
- android permission权限
- 审批系统的本地环境搭建