fileapi ajax上传图片显示

fileapi，加载图片，并且显示。

先new 一个fileReader。

// try sending
var reader = new FileReader();

reader.onloadstart = function() {
	console.log("onloadstart");
}

reader.onprogress = function(p) {
	console.log("onprogress");
}

reader.onload = function() {
	console.log("load complete");
}

reader.onloadend = function() {
	
}

form表单<input type="file" id=“imagemain”> 选择文件时

document.getElementById('imagemain').addEventListener('change',function (event){});

点击按钮添加图片

<form method="post" enctype="multipart/form-data">
        <div  id="formitem-bigpic">
            <div class="bigpic bigpic-add">
                添加<br>图片           
                <input type="file" id="imagemain" name="image">
            </div>
        </div>
    </form>

利用formData提交表单数据

var formData = new FormData();
formData.append('key1','value1');
formData.append('key2','value2');

formData.get('key1'); //返回value1
formData.has('123'); // Returns false
formData.delete('key1');//删除

        var data = new FormData();
        data.append('key1',21321);
        console.log(data);
        for(let i of data.entries()) {
           console.log(i[0]+ ','+ i[1]); 
        }
        console.log('-------delete -------');
        data.delete('key1');
        for(let i of data.entries()) {
           console.log(i[0]+ ','+ i[1]); 
        }
        console.log('-----delete------');
        data.set('key1',43232);
    //  data.append('key1',21321);
        data.append('key1','213opop');
        console.log(data.get('key1')); //获得 首先设置的值
        console.log(data.getAll('key1'));

//图片添加 fileApi
var handleFileSelect = (function () {
    var readerInstance;

    function inInt(args) {
        var args = args || {},fileJson = {},xhr = new XMLHttpRequest(),reader = new FileReader();
        this.fatherEle = args.fatherEle;
        this.sonClz = args.sonClz;
        this.Index = args.Index;
        this.maxSize = args.maxSize;
        this.inputImage = args.inputImage;
        this.inputItem = args.inputItem;
        this.addMethod = args.addMethod;
        this.delMethod = args.delMethod;

        function loadFile(evt,callback) {
            var file = evt.target.files[0];
            //取消时
            if (file === undefined) {
                return false;
            }

            if (!file.type.match('image.*')) {
                errMsgBox('图片格式请选择为png,jpg,jpeg等');
                return false;
            }

            if ((file.size / 1024) > maxSize) {
                errMsgBox('图片大小不能超过' + (maxSize / 1024).toFixed(2) + 'M');
                return false;
            }

            //是否存在
            /*  var boo = isExists(file);
             if(boo) return false;*/

            //开始选择
            reader.onloadstart = (function () {
                loadStart();
                fileOnload(file,callback);
            })(file,callback);
        };

        //load complete
        function fileOnload(file,callback) {
            reader.onload = (function () {
                return function (e) {
                    createEle(e.target.result,file.name,file.type);
                }
            })(file);
            reader.readAsDataURL(file);
            //上传  返回ajaxEnd
            var endFunc = ajaxPost(file,ajaxEnd);

            //上传结束 成功 或失败
            return endFunc(loadEnd,callback);
        };
        function ajaxPost(file,fn) {
            var oData = formDataFunc();

            //oData.append('fileImage',file);
            oData.append('fileImage',file);
            xhr.open("POST",addMethod,true);

            var endFn = fn();

            xhr.send(oData);

            return endFn;
        };
        function ajaxDel(id,fn) {
            xhr.open('POST',delMethod,true);
            var oData =  formDataFunc();
            oData.append('id',id);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        inputImage.value = '';
                        fn.call(this,JSON.parse(xhr.responseText));
                    };
                }
            };
                        
            xhr.send(oData);
        };

        //上传结果返回
        function ajaxEnd() {
            return function (fn,callback) {
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {
                        inputImage.value = '';
                        fn.call(this,JSON.parse(xhr.responseText),callback);
                    }
                };
            };
        };
        // formdata 数据添加
        function formDataFunc() {
            var oData = new FormData();
            for (var i = 0,j; j = inputItem[i++];) {
                oData.append(j.name,j.value);
            }
            return oData;
        };
        //显示图片上传div
        function loadStart() {
            var head = document.getElementsByClassName('m-head')[0];
            var child = document.getElementById('sure-disabled');
            if (child === null) {
                child = document.createElement('div');
                child.setAttribute('class','sure-disabled');
                child.setAttribute('id','sure-disabled');
                head.appendChild(child);
            } else {
                child.style.display = 'block';
            }
            inputImage.setAttribute('disabled','disabled')
        };
        //上传结束
        function loadEnd(data,callback) {
            var sure = document.getElementById('sure-disabled');
            sure.style.display = 'none';
            if (data.status != 0) {
                var child = fatherEle.getElementsByClassName('bigpic');
                var idx = child.length - 2;
                fatherEle.removeChild(child[idx]);
            }
            var clear = setTimeout(function(){
                inputImage.removeAttribute('disabled');
                clearTimeout(clear);
                clear = null;
            },200)
            callback.call(this,data);
        };

        //判断图片是否已经添加
        function isExists(fileObj) {
            var fileName = fileObj.name;
            //不为空 未添加过
            if (Object.getOwnPropertyNames(fileJson).length === 0) {
                fileJson[fileName] = file.type;
                return false;
            }
            if (fileJson[fileName] != fileObj.type) {
                fileJson[fileName] = file.type;
                return false;
            } else {
                alert('该图片已经上传');
                return true;
            }
        };

        // 创建并添加元素
        function createEle(srcStr,fileName,fileType) {
            var sonEle = fatherEle.getElementsByClassName(sonClz),sonLen = sonEle.length,tagEle = sonEle[sonLen - Index],div = document.createElement('div');
            div.setAttribute('class',sonClz);
            div.innerHTML = '<img  src="' + srcStr + '"/><em class="delete_pic" data-msg="' + fileName + ':' + fileType + '"></em>';
            fatherEle.insertBefore(div,tagEle);
        };

        return {
            //添加图片 fn 定义服务器返回
            loadFileFunc: function (e,callback) {
                loadFile(e,callback);
            },//删除图片
            delFileFunc: function (param,fn) {
                ajaxDel(param,fn)
            },//清空 已经添加的图片信息
            cleanFile: function () {
                fileJson = {};
            },//删除一张 图片信息
            cleanOneFile: function (data) {
                var dataAry = data.split(':'),fileName = dataAry[0],flieType = dataAry[1],tmpJson = {};

                for (var i in fileJson) {
                    if (!(i == fileName && flieType == fileJson[i])) {
                        tmpJson[i] = fileJson[i];
                    }
                }
                fileJson = tmpJson;
            },//添加Form 信息 inputItem 固定参数补充
            addInputItem: function (ary) {
                inputItem = inputItem.concat(ary);
            },//点击确定后 添加图片
            showLoad: function () {
                var clz = fatherEle.getAttribute('class');
                if (clz.indexOf('formitem-top') < 0) {
                    var clz = clz + ' formitem-top';
                    fatherEle.setAttribute('class',clz);
                }
            }
        };
    };
    return {
        getReaderInstance: function (args) {
         
            return readerInstance;
        }
    };
})();

var flieFunc = handleFileSelect.getReaderInstance({
    inputImage: document.getElementById('imagemain'),//inputfile 按钮
    inputItem: [document.getElementById('comm')],//固定参数
    fatherEle: document.getElementById('formitem-bigpic'),//容器
    addMethod: addMethod,//添加 图片请求路径
    delMethod: delMethod,//删除 图片请求路径
    sonClz: 'bigpic',Index: 1,//追加图片的位置
    maxSize: 10300// 图片最大 大小限制
});

设置监听事件

    document.getElementById('imagemain').addEventListener('change',function (event) {
        flieFunc.addInputItem([document.getElementById('comment_id')]);
        flieFunc.loadFileFunc(event,function (rtn) {
            console.log(rtn + '  上传成功后返回数据');
        });
    },false);

原文链接：https://www.f2er.com/ajax/162092.html

fileapi ajax上传图片显示

猜你在找的Ajax相关文章