PHP+jQuery+Ajax完成多图片上传介绍,

php头像上传带预览:

共谋上传图片,大家并不目生,可是,在此后开拓的类型中,只怕并不会让你利用提交刷新页面式的上传图片,比方上传头像,根据常理,断定是在相册选取照片之后,确认上传,而早晚不会经过form表单,点击submit刷新式上传。小编为咱们介绍二种异步非刷新式上传图片+图片预览:第二种,通过现有的uploadfy插件举办上传,英特网海人民广播广播台湾大学实例。

PHP+jQuery+Ajax达成多图片上传介绍,

PHP+jQuery+Ajax完结多图片上传介绍:

正文中用到三个Ajax表单提交插件:jqery.form.js,有哲人修改了几行代码并改名字为:jquery.wallform.js,直接拿来用。

上面就来就来介绍一下那壹款功用壮大的插件的施用,须求的朋友可以做一下参考.

在不刷新页面包车型地铁前提下,使用PHP+jQuery+Ajax完毕多图片上传的效能。用户只需求点击选取要上传的图纸,然后图片自动上传到服务器上并体现在页面上,效果图如下:

图片 1

一.HTML代码:

在页面上停放一个form表单,使用post提交到后台php管理程序upload.php,注意enctype属性设置要帮忙文件上传。#preview用来显示上传完成后的图样。关于css样式设置本文不加表明,请参见下载包的源码.

<form id="imageform" method="post" enctype="multipart/form-data" action="upload.php">
  <div id="up_status" style="display:none"><img src="loader.gif" alt="uploading"/></div>
  <div id="up_btn" class="btn"> 添加图片
    <input id="photoimg" type="file" name="photoimg">
  </div>
</form>
<p>最大100KB,支持jpg,gif,png格式。</p>
<div id="preview"></div>

二.jQuery代码:

本实例基于jQuery,由此必须在页面中载入jquery库以及jquery.wallform.js。

<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jquery.wallform.js"></script>

当点击按键“增添图片”后,弹出选择文件对话框,选拔要上传的图片后,触发change事件。

下一场表单#imageform调用jquery.wallform.js的ajaxForm()方法,将表单数据交由给后台PHP管理,并依据重临结果管理页面成分的来得。若是上传成功,图片会一张张排列呈现在页面上。关于ajaxForm()的使用能够参考本站小说:Ajax表单提交插件jqery
form。

$(function(){ 
  $('#photoimg').die('click').live('change', function(){ 
    var status = $("#up_status"); 
    var btn = $("#up_btn"); 
    $("#imageform").ajaxForm({ 
      target: '#preview',  
      beforeSubmit:function(){ 
        status.show(); 
        btn.hide(); 
      },  
      success:function(){ 
        status.hide(); 
        btn.show(); 
      },  
      error:function(){ 
        status.hide(); 
        btn.show(); 
      } 
        }).submit(); 
  }); 
});

三.php代码:

upload.php处理图片上传,并将上传好的图样保存在uploads/目录,注意该目录要有写权限。

率先需求检查评定是或不是为POST格局提交,然后剖断图片格式、图片大小是或不是符合必要,然后利用move_uploaded_file()上传图片,并将图片重命名,格式为:time().rand(100,99九)。

$path = "uploads/"; 
$extArr = array("jpg", "png", "gif"); 
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){ 
  $name = $_FILES['photoimg']['name']; 
  $size = $_FILES['photoimg']['size']; 
  if(empty($name)){ 
    echo '请选择要上传的图片'; 
    exit; 
  } 
  $ext = extend($name); 
  if(!in_array($ext,$extArr)){ 
    echo '图片格式错误!'; 
    exit; 
  } 
  if($size>(100*1024)){ 
    echo '图片大小不能超过100KB'; 
    exit; 
  } 
  $image_name = time().rand(100,999).".".$ext; 
  $tmp = $_FILES['photoimg']['tmp_name']; 
  if(move_uploaded_file($tmp, $path.$image_name)){ 
    echo '<img src="'.$path.$image_name.'"  class="preview">'; 
  }
  else{ 
    echo '上传出错了!'; 
  } 
  exit; 
} 
//获取文件类型后缀 
function extend($file_name){ 
  $extend = pathinfo($file_name); 
  $extend = strtolower($extend["extension"]); 
  return $extend; 
}

原稿地址:

最原始地:

PHP+jQuery+Ajax达成多图片上传介绍:
本文中用到二个Ajax表单提交插件:jqery.form.js,有哲人修改了几行代码…

磋商上传图片,我们并不面生,不过,在后来开采的品种中,可能并不会令你使用提交刷新页面式的上传图片,比方上传头像,依照规律,确定是在相册接纳照片之后,确认上传,而一定不会经过form表单,点击submit刷新式上传。小编为大家介绍二种异步非刷新式上传图片+图片预览:第三种,通过现有的uploadfy插件实行上传,英特网海人民广播广播台湾大学实例。可是本人第3为大家介绍的是第二种,通过Ajax上传图片。因为使用uploadfy插件要求设备支撑swf格式的Flash,所以对绝大好多手提式有线话机来讲,第三种方法就不能够使用了。首先,小编先跟大家说一下上传原理:通过js调节file文本域,当选拔照片之后,通过Ajax异步提交form表单,然后将图
片的岗位作为重临值,使用js把img的src属性设置为再次来到值。

而是本人重要为大家介绍的是第三种,通过Ajax上传图片。因为使用uploadfy插件供给设备支撑swf格式的Flash,所以对绝大大多有线电话来讲,第叁种方法就不可能使用了。首先,小编先跟大家说一下上传原理:通过js调节file文本域,当选用照片之后,通过Ajax异步提交form表单,然后将图纸的职责作为再次回到值,使用js把img的src属性设置为再次来到值。

上传头像区域:

上传头像区域:

代码:

代码:

相关文章