首页 > PHP资讯 > HTML5培训技术 > 使用jquery.form.js实现图片上传的方法_jquery

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

HTML5培训技术
本文实例讲述了使用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 '
'.$tmp_name.'
'.$upname.'
'.$updir.'
'.$ext.'上传成功'; //echo '上传成功'; echo $upname; //$im=$updir.$upname; //echo $im; //echo ' '; //$views->assign('image',$upname); //$views->display('default/testupfile.html'); } else echo '上传失败2';}else echo '上传失败1';?>

testupfile.html

Insert title here<script type="text/javascript" src="
/scripts/jquery.js?1.1.15">《script》<script type="text/javascript" src="
/scripts/jquery.form.js?1.1.15">《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("
/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("
/attached/images/"+response2+"' width='100' height='60'/>");  $("#im2").val(response2);  },  error:function(msg){  alert("出错了");  } }); });});《script》文件上传
文件:
文件:

tu


tu2

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery form操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

HTML5培训技术

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持11不支持0