layui附件上传的图片预览功能实现

在项目中添加页面需要添加一个拖拽或者点击上传的模块，生成一个多文件列表。

点击或者拖拽图片，将生成一条数据显示在表头下方，点击图片名弹出一个layui弹窗预览图片

//多文件列表示例
    var allowUploadFile='.xls .xlsx .doc .docx .pdf .ppt .pptx .png .jpg';
    var demoListView = $('#demoList')
        , uploadListIns = upload.render({
   
        elem: '#test10'
        , url: '/workorder/workOrderOfficeInsert' //改成您自己的上传接口
        , accept: 'file'
        , multiple: true
        , auto: false
        , size: 61440  //30M
        , bindAction: '#testListAction'
        , choose: function (obj) {
   
            var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
            //读取本地文件
            obj.preview(function (index, file, result) {
   
                addannex ++;
                var imgSrc = result;  //result得到图像的base64编码
                var type=file.name.substring(file.name.lastIndexOf("."),file.name.length);
                if (allowUploadFile.indexOf(type) == -1 ){
     //indexOf(type)查找type的第一个字符在allowUploadFile中的索引位置
                    delete files[index];