本文實例講述了使用jquery.form.js實現圖片上傳的方法。分享給大家供大家參考，具體如下：
testupfile2.php
<?phpheader('Content-type:text/html;charset=utf-8');include_once 'includes/common.inc.php'; if(!empty($_FILES['upfile'])){ //文件格式 $image=array('image/jpg', 'image/jpeg', 'image/png', 'image/pjpeg', 'image/gif', 'image/bmp', 'image/x-png' );$updir=$_SERVER['DOCUMENT_ROOT'].$_config['g']['baseUrl'].'/attached/images/';$upfile=$_FILES['upfile'];$name=$upfile['name'];$ext=substr($upfile['name'],strpos($upfile['name'],'.'));$upname=md5(time().rand(1, 1000)).$ext;$type=$upfile['type'];$size=$upfile['size'];$tmp_name=$upfile['tmp_name'];$error=$upfile['error'];$ok=0; foreach ($image as $key=>$value) { if($type==$value)$ok=1; } if($ok=='1' && $error=='0'){ move_uploaded_file($tmp_name,$updir.$upname); //echo '<br>'.$tmp_name.'<br>'.$upname.'<br>'.$updir.'<br>'.$ext.'上傳成功'; //echo '上傳成功'; echo $upname; //$im=$updir.$upname; //echo $im; //echo '<img src='.$updir.$upname.' />'; //$views->assign('image',$upname); //$views->display('default/testupfile.html'); } else echo '上傳失敗2';}else echo '上傳失敗1';?>testupfile.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="<!--{$baseUrl}-->/scripts/jquery.js"></script><script type="text/javascript" src="<!--{$baseUrl}-->/scripts/jquery.form.js"></script><script type="text/javascript">$(function(){ //jquery.form image1 $("#upimage").bind("click",function(){ if($("#upfile").val()==""){ alert("請選擇一個圖片文件,再點擊"); return; } $("#form1").ajaxSubmit({ url:"testupfile2.php", type:"POST", //date:"upfile=upfile", success:function(response){ alert(response); $("#ln").empty(); $("#ln").append("<img src='<!--{$baseUrl}-->/attached/images/"+response+"' width='100' height='60'/>"); $("#im1").val(response); }, error:function(msg){ alert("出錯了"); } }); }); //jquery.form image2 $("#upimage2").bind("click",function(){ if($("#upfile2").val()==""){ alert("請選擇一個圖片文件,再點擊2"); return; } $("#form2").ajaxSubmit({ url:"testupfile2.php", type:"POST", //date:"upfile=upfile2", success:function(response2){ alert(response2); $("#ln2").empty(); $("#ln2").append("<img src='<!--{$baseUrl}-->/attached/images/"+response2+"' width='100' height='60'/>"); $("#im2").val(response2); }, error:function(msg){ alert("出錯了"); } }); });});</script></head><body>文件上傳<form enctype="multipart/form-data" id="form1" method="post" action="">文件: <input type="file" name="upfile" id="upfile"><input type="button" id="upimage" value="圖片上傳1"> <input type="text" name="im1" id="im1" value="" /></form><form enctype="multipart/form-data" id="form2" method="post" action="">文件: <input type="file" name="upfile" id="upfile2"><input type="button" id="upimage2" value="圖片上傳2"> <input type="text" name="im2" id="im2" value="" /></form><div id="ln">tu</div><br><div id="ln2">tu2</div></body></html>更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery form操作技巧匯總》、《jquery中Ajax用法總結》、《jQuery切換特效與技巧總結》、《jQuery拖拽特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
