uploadify的基本用法

#uploadify的基本用法javascript

下载uploadify的插件压缩包 连接(http://www.uploadify.com/demos/) 下载好了以后的就把解压好的文件放到文件中,若是按模块可放到公共Public下的static文件里面。 ###第一步 引入和编写HTML代码php

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>UploadiFive Test</title>

<link rel="stylesheet" href="__PUBLIC__/static/uploadify/uploadify.css" />
<script type="text/javascript" src="__STATIC__/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/uploadify/jquery.uploadify.min.js"></script>
//引入css和js文件
<style type="text/css">
body {
	font: 13px Arial, Helvetica, Sans-serif;
//设置body样式
}
</style>
</head>

<body>

	<form>
		<input id="file_upload" name="file_upload" type="file" multiple="true">
		<div id="test"><img src="" alt=""></div>
	</form>
</body>
</html>

###第二步 javascript代码css

<script type="text/javascript">

          $(function() {$('#file_upload').uploadify(
			{
				 "height"   : 30,//设置浏览按钮的高度 ,默认值:30,
 
                     "width"      : 120,//设置浏览按钮的宽度 ,默认值:110

                     "swf"    :"uploadify.swf",//[必须设置]swf的路径

                      "fileObjName"     : "download",
                      "fileSizeLimit" : '200KB',//限制文件大小
                      "buttonText"      : "上传图片",//浏览按钮的文本,默认值:BROWSE
                      "buttonClass"      :"buttonClass",
                      "uploader"        :  'uploadify.php',//[必须设置]上传文件触发的url
                       'removeTimeout'   : 1,
                       'fileTypeExts'    : '*.jpg; *.png; *.gif;',//容许上传的文件类型,限制弹出文件选择框里能选择的文件
				'onUploadSuccess':function(file, data, response){

					console.log(file);
					var  obj= $.parseJSON(data);
					console.log(obj);
			$('#test img').attr('src',obj.src);
				}

			});

		});
	</script>

###第三步uploadify.php代码html

$targetFolder = '/uploads'; // Relative to the root

$verifyToken = md5('unique_salt' . $_POST['timestamp']);


$data=$_FILES['Filedata']['tmp_name'];

move_uploaded_file($data,'./test/king.jpg');


$data=array(
	'info'=>'上传成功',
	'src'=>'./test/king.jpg'
	);

echo json_encode($data);

效果图

相关文章
相关标签/搜索