ajax技术无刷新上传文件_JS/JQuery

自己这几天刚用了jQuery_upload_multiple上传插件，所以在这里把用法说一下。

要实现基于这个插件的上传功能，其实挺简单，需要jquery就行了，另外还有一个上传文件时的PHP程序，费话不多说，先看下面的HTML，也就是带有上传表单，让用户选择上传文件的页面：

        
    <html xmlns="http://www.w3.org/1999/xhtml">    
    <head>    
    <title>Easy Ajax FormData Upload Multiple Imagestitle>    
    <script type="text/javascript" src="https://www.yangguangdream.com/zb_system/script/jquery-2.2.4.min.js"></script>    
    <head>    
    <body>    
    <style>    
        #feedback{width:1200px;margin:0 auto;}    
        #feedback img{float:left;width:300px;height:300px;}    
        #ZjmainstaySignaturePicture,#addpicContainer{float:left;width: 100%;}    
        #addpicContainer{margin-left:5px;}    
        #ZjmainstaySignaturePicture img{width: 535px;}    
        #addpicContainer img{float: left;}    
        .loading{display:none;background:url("https://www.yangguangdream.com/zb_users/upload/2018/11/20181119210538154263273823257.gif") no-repeat scroll 0 0 transparent;float: left;padding:8px;margin:18px 0 0 18px;}    
    </style>    
    <div id="addpicContainer">    
    
    
    
    
        <img onclick="getElementById('inputfile').click()" style="cursor:pointer;border: 1px solid #AABBCC;" title="点击添加图片" alt="点击添加图片" src="https://www.yangguangdream.com/zb_users/upload/2018/11/20181119210628154263278884707.jpg">    
        <input type="file" multiple="multiple" id="inputfile"style="height:0;width:0;z-index: -1; position: absolute;left: 10px;top: 5px;"/>    
        <span class="loading"></span>    
    </div>    
    <div id="feedback"></div>    
    <script type="text/javascript">    
    $(document).ready(function(){    
        //响应文件添加成功事件    
        $("#inputfile").change(function(){    
            //创建FormData对象    
            var data = new FormData();    
            //为FormData对象添加数据    
            $.each($('#inputfile')[0].files, function(i, file) {    
                data.append('upload_file'+i, file);    
            });    
            $(".loading").show();   //显示加载图片    
            //发送数据    
            $.ajax({    
                url:'submit_form_process.php',    
                type:'POST',    
                data:data,    
                cache: false,    
                contentType: false, //不可缺参数    
                processData: false,     //不可缺参数    
                success:function(data){    
                    data = $(data).html();    
                    //第一个feedback数据直接append，其他的用before第1个（ .eq(0).before() ）放至最前面。    
                    //data.replace(/</g,'<').replace(/>/g,'>') 转换html标签，否则图片无法显示。    
                   if($("#feedback").children('img').length == 0) $("#feedback").append(data.replace(/</g,'<').replace(/>/g,'>'));    
                   else $("#feedback").children('img').eq(0).before(data.replace(/</g,'<').replace(/>/g,'>'));    
                    $(".loading").hide();   //加载成功移除加载图片    
                },    
                error:function(){    
                    alert('上传出错');    
                    $(".loading").hide();   //加载失败移除加载图片    
                }    
            });    
        });    
    });    
    </script>    
    </body>    
    </html>

接下来是上传图片的PHP文件代码：文件名：submit_form_process.php