php+ajax实现图片文件上传实例代码
现在我们常用的异步文件上传功能有几种，如我最初使用的是使用iframe框架形式了效果是一样的，到后来的真正的aj(www.phpfensi.com)ax功能效果，到最后的flash+php功能，下面我介绍ajax与iframe实现异步文件上传的功能的例子。
方法一，利用jquery ajaxfileupload.js文件上传
其实就是实现无刷新式的文件上传。可采用IFRAME文件上传原理。
实际上在用PHP上传文件时。。。只能用$_FILES形式，但是若我们只是单一的用JS方式取其ID，如<input id='img' type='file'>..document.getElementById('img').value或者jquery形式的$("#img")都是不能正真实际上传的（但是还是有很多人这样做，刚开始时我也是）。
可是功能上又要要求实现所谓的[异步上传]，怎么办呢？？只能借助于第三方的组件，或者自己写一个（在网页里嵌入一个IFRAME）。但如果是考虑开发时间，那以用第三方的，这里有一个不错的jQuery 的Ajax文件上传的组件，是[ajaxfileupload.js",其组件下载地址为：http://www.111cn.net/，下载完毕里面有一个php的应用demo，很容易看懂的。
过程:
(1)前端上文件的代码:test.php,代码如下:
<script type= "text/javascript" src= "jquery.js" ></script> <script type= "text/javascript" src= "ajaxfileupload.js" ></script> <script type= "text/javascript" > function ajaxFileUpload() { $.ajaxFileUpload ( { url: 'doajaxfileupload.php' , //你处理上传文件的服务端 secureuri: false , fileElementId: 'img' , dataType: 'json' , success: function (data) { alert(data.file_infor); } } ) return false ; } </script>相应的HTML为:
< input id = "img" type = "file" size = "45" name = "img" class = "input" > < button class = "button" id = "buttonUpload" onclick = "return ajaxFileUpload();" > Upload </ button >这样客户端就完成了.
(2) 再服务器端时doajaxfileupload.php,此处为了简便的检测是否真正的传值过来了,你可以将它存起来了.代码如下:
$file_infor = var_export( $_FILES ,true); file_put_contents ( "d:file_infor.php" . $file_infor );这样你打来刚生成的file_infor.php文件时,你又看到了熟悉的信息了,代码如下:
array ( 'name' => 'lamp.jpg' , 'type' => 'image/pjpeg' , 'tmp_name' => 'c:windowstempphpFA.tmp' , 'error' =>0, 'size' =>3127 )当然,真正的处理类于这样的,代码如下:
<?php $upFilePath = "d:/" ; $ok =@move_uploaded_file( $_FILES [ 'img' ][ 'tmp_name' ], $upFilePath ); if ( $ok === FALSE){ echo json_encode( 'file_infor' => '上传失败' ); } else { echo json_encode( 'file_infor' => '上传成功' ); } ?>方法二,利用iframe框架上传图片
html代码,代码如下:
< div class = "frm" > < form name = "uploadFrom" id = "uploadFrom" action = "upload.php" method = "post" target = "tarframe" enctype = "multipart/form-data" > < input type = "file" id = "upload_file" name = "upfile" > </ form > < iframe src = "" width = "0" height = "0" style = "display:none;" name = "tarframe" > </ iframe > </ div > < div id = "msg" > </ div > index.js $(function(){ $("#upload_file").change(function(){ $("#uploadFrom").submit(); }); }); function stopSend(str){ var im = "<img src='upload/images/" +str+"' > "; $("#msg").append(im); }upload.php
<?php $file = $_FILES [ 'upfile' ]; $name =rand(0,500000). dechex (rand(0,10000)). ".jpg" ; move_uploaded_file( $file [ 'tmp_name' ], "upload/images/" . $name ); //调用iframe父窗口的js 函数 echo "<script>parent.stopSend('$name')</script>" ; ?>方法三,原生态ajax文件上传,代码如下:
<!DOCTYPE html> <html> <head> <title>Html5 Ajax 上传文件</title> <meta charset= "utf-8" > <script type= "text/javascript" > var xhr; function createXMLHttpRequest() { if (window.ActiveXObject) { xhr = new ActiveXObject( "Microsoft.XMLHTTP" ); } else if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } } function UpladFile() { var fileObj = document.getElementById( "file" ).files[0]; var FileController = 'upload.php' ; var form = new FormData(); form.append( "myfile" , fileObj); createXMLHttpRequest(); xhr.onreadystatechange = handleStateChange; xhr.open( "post" , FileController, true); xhr.send(form); } function handleStateChange() { if (xhr.readyState == 4) { if (xhr.status == 200 || xhr.status == 0) { var result = xhr.responseText; var json = eval ( "(" + result + ")" ); alert( '图片链接:n' +json.file); } } } </script> <style> .txt{ height:28px; border:1px solid #cdcdcd; width:670px;} .mybtn{ background-color:#FFF; line-height:14px;vertical-align:middle;border:1px solid #CDCDCD;height:30px; width:70px;} .file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px } </style> </head> <body> <div class = "form-group" > <label class = "control-label" >图片</label> <br/> <input type= 'text' name= 'textfield' id= 'textfield' class = 'txt' /> <span onclick= "file.click()" class = "mybtn" >浏览...</span> <input type= "file" name= "file" class = "file" id= "file" size= "28" onchange= "document.getElementById('textfield').value=this.value" /> <span onclick= "UpladFile()" class = "mybtn" >上传</span> </div> </body> </html>PHP代码如下:
<?php if (isset( $_FILES [ "myfile" ])) { $ret = array (); $uploadDir = 'images' .DIRECTORY_SEPARATOR. date ( "Ymd" ).DIRECTORY_SEPARATOR; $dir = dirname( __FILE__ ).DIRECTORY_SEPARATOR. $uploadDir ; file_exists ( $dir ) || ( mkdir ( $dir ,0777,true) && chmod ( $dir ,0777)); if (! is_array ( $_FILES [ "myfile" ][ "name" ])) //single file { $fileName = time().uniqid(). '.' . pathinfo ( $_FILES [ "myfile" ][ "name" ])[ 'extension' ]; move_uploaded_file( $_FILES [ "myfile" ][ "tmp_name" ], $dir . $fileName ); $ret [ 'file' ] = DIRECTORY_SEPARATOR. $uploadDir . $fileName ; } echo json_encode( $ret ); } ?>查看更多关于php+ajax实现图片文件上传实例代码 - php高级应用的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did29850