准备工作jquery.js以及uploadify的包
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="js/uploadify/jquery.uploadify.min.js"></script> <script type="text/javascript" src="js/image.js"></script> <link rel="stylesheet" type="text/css" href="js/uploadify/uploadify.css"> </head> <body> <form method="post" enctype="multipart/form-data"> <input id="file_upload" type="file" multiple="true" > <img style="display: none" id="upload_org_code_img" src="" width="150" height="150"> <input id="file_upload_image" name="logo" type="hidden" multiple="true" value=""> </form> </body> </html>
php页面，这里只做了简单的返回
<?php header(\'Content-Type:application/json; charset=utf-8\'); if(!empty($_FILES)){ $_FILES["file"]["name"]= time().\'.jpg\'; } move_uploaded_file($_FILES["file"]["tmp_name"], "files/" . $_FILES["file"]["name"]); $array = [ \'code\'=>\'1\', \'success\'=>\'成功\', \'data\' => \'http://localhost/AjaxImageUpload/success/files/\'.$_FILES["file"]["name"], ]; echo json_encode($array,true); ?>
js代码
$(function() { $("#file_upload").uploadify({ \'swf\' : \'http://localhost/AjaxImageUpload/success/js/uploadify/uploadify.swf\', \'uploader\' : \'http://localhost/AjaxImageUpload/success/up.php\', \'buttonText\' : \'图片上传\', \'fileTypeDesc\' : \'Image files\', \'fileObjName\' : \'file\', \'fileTypeExts\' : \'*.gif; *.jpg; *.png\', \'onUploadSuccess\' : function(file, data, response) { console.log(file); console.log(data); console.log(response); if(response) { var obj = JSON.parse(data); $("#upload_org_code_img").attr("src", obj.data); $("#file_upload_image").attr("value", obj.data); $("#upload_org_code_img").show(); } } }); });
如上，就实现了简单的异步上传并显示缩略图