头像

PHP+jQuery+Ajax多图片上传

来源:https://www.daimasucai.com/upload/22.html 代码素材管理员 2016-09-06浏览()

今天介绍大家一款多图片上传插件:通过PHP+Ajax实现多图片上传的效果。用户只需要点击选择要上传的图片,然后图片自动上传到服务器上并立即显示在页面上。

程序员,你不是一个人;网站开发QQ群:  在线充值,或联系QQ 3078847178直接充值

PHP+jQuery+Ajax多图片上传
分类:首页>>PHP/Mysql>>上传 阅读次数:
查看演示 下载次数: 6

手机扫码访问:

下载资源 下载积分: 150

  HTML

  首先我们在页面上放置个上传按钮,使用POST提交到ajax.php。#ul_pics 用来显示上传完毕后的图片。关于按钮、进度条、图片垂直居中样式不加说明,请参照下载包的源码。

    <a class="btn" id="btn">上传图片</a> 最大500KB,支持jpg,gif,png格式。 

    <ul id="ul_pics" class="ul_pics clearfix"></ul>

  PHP

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

    $typeArr = array("jpg", "png", "gif");//允许上传文件格式 

    $path = "uploads/";//上传路径 

     

    if (isset($_POST)) { 

        $name = $_FILES['file']['name']; 

        $size = $_FILES['file']['size']; 

        $name_tmp = $_FILES['file']['tmp_name']; 

        if (empty($name)) { 

            echo json_encode(array("error"=>"您还未选择图片")); 

            exit; 

        } 

        $type = strtolower(substr(strrchr($name, '.'), 1)); //获取文件类型 

         

        if (!in_array($type, $typeArr)) { 

            echo json_encode(array("error"=>"清上传jpg,png或gif类型的图片!")); 

            exit; 

        } 

        if ($size > (500 * 1024)) { 

            echo json_encode(array("error"=>"图片大小已超过500KB!")); 

            exit; 

        } 

         

        $pic_name = time() . rand(10000, 99999) . "." . $type;//图片名称 

        $pic_url = $path . $pic_name;//上传后图片路径+名称 

        if (move_uploaded_file($name_tmp, $pic_url)) { //临时文件转移到目标文件夹 

            echo json_encode(array("error"=>"0","pic"=>$pic_url,"name"=>$pic_name)); 

        } else { 

            echo json_encode(array("error"=>"上传有误,清检查服务器配置!")); 

        } 

    }

  plupload参数设置

参数描述默认值
Browse_button触发浏览文件按钮-
Container展现上传文件列表的容器body
chunk_size当上传文件大于服务器接收端文件大小限制的时候,可以分多次请求发给服务器,如果不需要从设置中移出-
file_data_name设置上传字段的名称文件
filters选择文件扩展名的过滤器,每个过滤规则中只有title和ext两项[{title:'', extensions:''}]-
flash_swf_urlflash文件地址-
headers自定义的插入http请求的键值对-
max_file_size最大上传文件大小(格式100b, 10kb, 10mb, 1gb)-
multi_selection布尔值,是否多文件上传false
resize修改图片属性 resize: {width: 320, height: 240, quality: 90}-
runtimes上传插件初始化选用那种方式的优先级顺序,如果第一个初始化失败就走第二个,依次类推-
required_features需要那些特性,才能初始化插件-
url上传服务器地址-
unique_names是否生成唯一的文件名,避免与服务器文件重名-
urlstream_upload布尔值 如果是flash上传应该用URLStream 代替FileReference.uploadfalse


声明:本文为原创文章,如需转载,请注明来源daimasucai.com并保留原文链接:https://www.daimasucai.com/upload/22.html
如果您觉得本文的内容对您的学习有所帮助,您可以扫描下面的二维码请我喝杯茶,感谢!
alipay转账 alipay转账 扫扫加qq群

评论(0)


温馨提示:为规范评论内容,垃圾评论一律封号...

后面还有条评论,点击查看>>