使用jquery.form.js实现图片上传的方法

本文实例讲述了使用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程序设计有所帮助。