JavaScript插件--Uploadify的使用

最新推荐文章于 2022-10-17 12:04:39 发布

ruby97

最新推荐文章于 2022-10-17 12:04:39 发布

阅读量2.6w

点赞数 4

分类专栏： JavaScript 文章标签： javascript stylesheet encoding file function path

本文链接：https://blog.csdn.net/ruby97/article/details/7613292

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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 上传成功后执行的回调函数

注，还有很多配置参数以及事件，具体可参看Uploadify官方网站。此外，我把官网的文档大概翻译了一下，给出中文版下载：

下载Uploadify3.1中文版参考手册

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()了，故无需考虑编码方式了。

---------------------------------------------------------------------------------------------------------------------------

最后看一下实际的页面表现