PHP+jQuery+html5+Ajax多图预览无刷新上传(附源码下载)

官方金沙娱乐赌场网站_赌博娱乐注册送18现金,澳门线上,所以说,亚足联对于这一决策是完全支持的。,那么,谁会从中受益呢?

上传效果截图:

511遇见

载入jQuery库文件、上传插件文件plupload.full.min.js

  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript" src="plupload/plupload.full.min.js"></script>
  3. <script type="text/javascript">

Html代码

上传的布局按钮进度条非常简单,你完全根据自己的需要,来设定,可以参考源码包中的文件自己修改设定。

  1.  <div class="demo">
  2.                 <a class="btn" id="btn">上传图片</a> 最大1000KB,支持jpg,gif,png格式。
  3.                 <ul id="ul_pics" class="ul_pics clearfix"></ul>
  4.        </div>

ajax.php代码

ajax.php处理图片上传,并将上传好的图片保存在uploads/目录,注意该目录是否有写入权限。首先需要检测是否为POST方式提交,然后判断图片格式、图片大小是否符合要求,然后使用move_uploaded_file()上传图片,并将图片重命名为 time().rand(100,999)。

  1. <?php
  2. $typeArr = array("jpg", "png", "gif");//允许上传文件格式
  3. $path = "uploads/";//上传路径
  4.  
  5. if (isset($_POST)) {
  6.     $name = $_FILES['file']['name'];
  7.     $size = $_FILES['file']['size'];
  8.     $name_tmp = $_FILES['file']['tmp_name'];
  9.     if (empty($name)) {
  10.         echo json_encode(array("error"=>"您还未选择图片"));
  11.         exit;
  12.     }
  13.     $type = strtolower(substr(strrchr($name, '.'), 1)); //获取文件类型
  14.  
  15.     if (!in_array($type, $typeArr)) {
  16.         echo json_encode(array("error"=>"清上传jpg,png或gif类型的图片!"));
  17.         exit;
  18.     }
  19.     if ($size > (1000 * 1024)) {
  20.         echo json_encode(array("error"=>"图片大小已超过500KB!"));
  21.         exit;
  22.     }
  23.  
  24.     $pic_name = time() . rand(10000, 99999) . "." . $type;//图片名称
  25.     $pic_url = $path . $pic_name;//上传后图片路径+名称
  26.     if (move_uploaded_file($name_tmp, $pic_url)) { //临时文件转移到目标文件夹
  27.         echo json_encode(array("error"=>"0","pic"=>$pic_url,"name"=>$pic_name));
  28.     } else {
  29.         echo json_encode(array("error"=>"上传有误,清检查服务器配置!"));
  30.     }
  31. }

plupload上传操作部分

当点击按钮“上传图片”后,弹出选择文件对话框,按 "ctrl" 选择多图或者鼠标选定多图上传。然后调用 uploader.start() 方法,开始上传。上传中间过程我们可以用 UploadProgress 方法来显示文件进度,最后通过 FileUploaded 来显示对应的图片。通过浏览器控制台,会发现上传一张图片,会向后台ajax.php请求一次。具体设置下载源码。

今天我们通过多图片上传插件:http://www.513jianzhu.com/gfjsyldcwz,实现多图片上传的效果,通过 plupload上传操作部分设置,我们可以设定上传图片类型,上传图片多少,通过上传插件调用了Moxie.swf实现了多图上传,其实目前是无法通过jquery实现多图上传的,这里你可以关闭多图上传,使用单图上传,这个插件功能非常强大,设置非常灵活,下面的源码里有详细的说明,更多实例可以到官网看文档,这里主要制作一个例子对开发的朋友希望有更多的帮助启发。

源码百度云盘下载:http://www.513jianzhu.com/gfjsyldcwz/s/1pKMHax9


发布日期:

所属分类: JavaScript/jquery 标签: