ajax技术无刷新上传文件

2018-11-19 20:57:44  阅读 1368 次 评论 0 条

自己这几天刚用了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


20181107.png


把hTML代码保存为一个xxx.html,保存PHP代码为submit_form_process.php,然后在这两个文件的同级目录下建立一个上传文件夹files,可以测试了,100%有效。


微信扫码查看本文
本文地址:https://www.yangguangdream.com/?id=2010
版权声明:本文为原创文章,版权归 编辑君 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?