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

前端技术 2023/09/07 JavaScript

本文实例讲述了使用jquery.form.js实现图片上传的方法。分享给大家供大家参考，具体如下：

testupfile2.php

<?php
header(\'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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/18959

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案