How to upload images using jquery.form.js

How to upload images using jquery.form.js_jquery

WBOY

Release： 2016-05-16 15:02:11

Original

1504 people have browsed it

The example in this article describes how to use jquery.form.js to upload images. Share it with everyone for your reference, the details are as follows:

testupfile2.php

<&#63;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';
&#63;>

Copy after login

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>

Copy after login

Readers who are interested in more jQuery-related content can check out the special topics on this site: "JQuery form operation skills summary", "Ajax usage summary in jquery", "Summary of jQuery switching effects and techniques", "Summary of jQuery drag effects and techniques", "Summary of jQuery extension techniques", "Summary of common classic jQuery special effects ", "jQuery animation and special effects usage summary", "jquery selector usage summary" and "jQuery common plug-ins and usage summary"

I hope this article will be helpful to everyone in jQuery programming.