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

2019-11-20 10:09:33

字体：大中小

来源：转载

供稿：网友

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

上一篇：Struts2+jquery.form.js实现图片与文件上传的方法

下一篇：探讨：JavaScript ECAMScript5 新特性之get/set访问器