這篇文章主要介紹了使用jquery.form.js實(shí)現(xiàn)圖片上傳的方法,涉及jquery使用表單插件jquery.form.js進(jìn)行圖片上傳的提交、類型驗(yàn)證、執(zhí)行結(jié)果回調(diào)顯示等技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下

本文實(shí)例講述了使用jquery.form.js實(shí)現(xiàn)圖片上傳的方法。分享給大家供大家參考，具體如下：

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("請(qǐng)選擇一個(gè)圖片文件,再點(diǎn)擊");
  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("出錯(cuò)了");
  }
 });
 });
 //jquery.form image2
 $("#upimage2").bind("click",function(){
 if($("#upfile2").val()==""){
  alert("請(qǐng)選擇一個(gè)圖片文件,再點(diǎn)擊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("出錯(cuò)了");
  }
 });
 });
});
</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>

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery form操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: