fileapi ajax上传图片显示

来源：互联网发布：三菱q系列编程手册 pdf 编辑：程序博客网时间：2024/06/07 10:14

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

先new 一个fileReader。

主要方法

// try sendingvar 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'); //返回value1formData.has('123'); // Returns falseformData.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'));

//图片添加 fileApivar 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);

0 0