• Ajax+PHP实现异步上传多张图片


    Ajax+PHP实现异步上传多张图片

    HTML代码

    <!-- 
    date: 2018-04-27 13:46:55
    author: 王召波
    descride: 多张图片上传 
    -->
    <!DOCTYPE html>
    <html>
        <head>
        <meta charset="utf-8">
        <title>Ajax+PHP实现异步上传多张图片</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
        <style type="text/css">
            #feedback{
                min-height: 200px;
                text-align: center;
                border: 1px solid silver;
                border-radius: 3px;
            }
            #feedback img{
                margin:3px 10px;
                border: 1px solid silver;
                border-radius:3px;
                padding: 6px; 
                width: 35%;
                height: 85%;
            }
            #feedback p{
                font-family: "微软雅黑";
                line-height: 120px;
                color: #ccc;
            }
            .file {
                position: relative;
                display: inline-block;
                border: 1px solid #1ab294;
                border-radius: 4px;
                padding: 8px 16px;
                overflow: hidden;
                color: #fff;
                text-decoration: none;
                text-indent: 0;
                line-height: 20px;
                color: #1ab294;
                }
                
            .file input {
                position: absolute;
                font-size: 100px;
                right: 0;
                top: 0;
                opacity: 0;
            }
            .box{
                margin-top: 10px;
                text-align: center;
            }
            .box a{
                margin-left: 10px;
            }
        </style>
    </head>
    <body> 
        <!-- 响应返回数据容器 -->
        <div id="feedback">
        </div>
        <div class="box">
            <a href="javascript:;" class="file">选择图片
                <input type="file" multiple="multiple" id="inputfile" name="" class="photo">
            </a>
            <a href="javascript:;" class="file close">重新选择
                <input type="buttom" class="photo">
            </a>
        </div>
    <script type="text/javascript">
    $(document).ready(function(){
        //响应文件添加成功事件
        var feedback = $("#feedback");
        $("#inputfile").change(function(){
            if (this.files.length>2) {
                alert("最多只能选择两张图片");
                return false;
            }
            //创建FormData对象
            var data = new FormData();
            //为FormData对象添加数据
            $.each($('#inputfile')[0].files, function(i, file) {
                data.append('ruoshui'+i, file);
            });
            //追加其他数据
            data.append('id',1);
            //发送数据
            $.ajax({
                url:'./upload.php', 
                type:'post',
                data:data,
                dataType:'json',
                cache: false,
                contentType: false,
                processData: false,
                // contentType: false 和processData: false,这两个参数是为了设置ajax对file文件对象进行序列化
                success:function(data){        
                    var str = '';
                    $.each(data,function(i,n){
                        str +='<img src="'+n+'">';
                    });
                    $("#feedback").append(str);
                },
                error:function(){
                    alert('上传出错');
                }
            });
        });
        $(".close").on("click",function(){
            $("#feedback").empty();
        });
    });
    </script>
    </body>
    </html>

    PHP代码

    <?php
    /**
     * date: 2018-04-27 13:46:55
     * author: 王召波
     * descride: 多张图片上传
     */
    header('content-type:text/html charset:utf-8');
    $baseUrl = "./";
    $picArr = "";
    $index = 0; 
    foreach($_FILES as $file){
        $picName = 'ruoshui' . $index;//对应index.html FomData中的文件命名
        $fileName = $_FILES[$picName]['name'];
        //文件不存在才上传
        if(!file_exists($baseUrl.$fileName)) {
            $isMoved = false;  //默认上传失败
            $MAXIMUM_FILESIZE = 1 * 1024 * 1024;//文件大小限制1M = 1 * 1024 * 1024 B;
            $picType = "/^.(jpg|jpeg|gif|png){1}$/i"; 
            if ($_FILES[$picName]['size'] <= $MAXIMUM_FILESIZE && 
                preg_match($picType, strrchr($fileName, '.'))) {
                $isMoved = @move_uploaded_file ( $_FILES[$picName]['tmp_name'], $baseUrl.$fileName);//上传文件
            }
        }
        $picArr[] = $baseUrl.$fileName;
        $index++;
    }
    echo json_encode($picArr);

    效果图

  • 相关阅读:
    网页表单项Input的高级限制级用法
    程序员从初级到中级10个秘诀
    AspNet2.0页面生命周期(转载)
    WebService大讲堂之Axis2(4):二进制文件传输
    WebService大讲堂之Axis2(9):编写Axis2模块(Module)
    WebService大讲堂之Axis2(7):将Spring的装配JavaBean发布成WebService
    WebService大讲堂之Axis2(10):使用soapmonitor模块监视soap请求与响应消息
    WebService大讲堂之Axis2(5):会话(Session)管理
    lucence(补)
    WebService大讲堂之Axis2(6):跨服务会话(Session)管理
  • 原文地址:https://www.cnblogs.com/wangzhaobo/p/8962085.html
Copyright © 2020-2023  润新知