recherche

Maison >interface Web >js tutoriel >Comment télécharger des images en utilisant jquery.form.js_jquery

Comment télécharger des images en utilisant jquery.form.js_jquery

WBOY
WBOYoriginal
2016-05-16 15:02:111568parcourir

L'exemple de cet article décrit comment utiliser jquery.form.js pour télécharger des images. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

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;>

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>

Les lecteurs intéressés par davantage de contenu lié à jQuery peuvent consulter les sujets spéciaux sur ce site : "Résumé des compétences en matière d'opération de formulaire JQuery", "Résumé de l'utilisation d'Ajax dans jquery" , "Résumé des effets et techniques de commutation jQuery", "Résumé des effets et techniques de glisser jQuery", "Résumé des techniques d'extension jQuery", "Résumé des effets spéciaux jQuery classiques courants ", "Résumé de l'utilisation de l'animation et des effets spéciaux jQuery", "Résumé de l'utilisation du sélecteur jquery" et "plug-in commun jQuery- ins et résumé d'utilisation"

J'espère que cet article sera utile à tous ceux qui programment jQuery.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Exemples pour expliquer la vue View dans le framework Backbone.js de JavaScript_Basic KnowledgeArticle suivant：Exemples pour expliquer la vue View dans le framework Backbone.js de JavaScript_Basic Knowledge

Articles Liés

Voir plus