#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);