加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

Ajax方式实现文件上传

发布时间:2020-12-16 01:31:03 所属栏目:百科 来源:网络整理
导读:XMLHttpRequest Level 2添加了一个新的接口FormData,使用FormData的可以异步上传一个二进制文件. 许多主流浏览器都支持 FormData 对象,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。 FormData 具体信息参考:https://developer.mozilla.org/

XMLHttpRequest Level 2添加了一个新的接口FormData,使用FormData的可以异步上传一个二进制文件.
许多主流浏览器都支持 FormData 对象,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。

FormData 具体信息参考:https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/FormData


页面文件


<form id="uploadForm" enctype="multipart/form-data" class="form-horizontal form-bordered">


<div> <label>请选择需要上传的组件:<br /> <a href="javascript:;" class="btn red" id="importPlugin"> <span class="glyphicon glyphicon-download-alt"></span> 打开 </a> <span id="fileNameDes"></span> </label> <input type="file" style="display: none" id="fileSelect" name="userfile" accept="application/x-compressed"/> </div>
<div>
... ...
</div>

</form>

 
 

js脚本

    $("#importPlugin").click(function(){
        $("#fileSelect").click();
    });
    //检测选择文件事件
    $("#fileSelect").change(function(){
        var fileSelector = $("#fileSelect")[0].files;       
        $('#fileNameDes').text(fileSelector[0].name);
       
        if(fileSelector.length > 0) {
            var file = fileSelector[0];
            var nameArr = file.name.split('.');
            if(nameArr[1] != 'tgz'){
                hint_func('error','','仅支持tgz文件上传,请重新选择正确文件');                
                return false;
            }
            else {
                var formData = new FormData($( "#uploadForm" )[0]);
                var obj = document.getElementById("FileMD5");

                $.ajax({
                    url: 'index.php/upload/up',type: 'post',data: formData,async: false,cache: false,contentType: false,processData: false,success: function (datas) {
                        var result = JSON.parse(datas);
                        
                        if(code == 0){
                            ......                      

                        }
                        else{
                            ......
                        }

                    },error: function (datas) {
                        ......
                    }
                });
            }
        }
    });
控制器按照正常表单接收流程即可。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读