使用方法

1. 在html中加下如下代码

<input type="hidden" id="imagepath" name="">  <!-- 保存的图片id 用于表单提交 -->
<span id="upload_duixiang">上传</span><!-- 上传按钮 -->
<div class="show"></div> <!-- 输出图片 -->
<pre id="geoJsonTxt"></pre> <!-- 输出文件的json数据 -->
    

2. 引用css js文件

<link rel="stylesheet" type="text/css" href="FraUpload.css">
<script src="jquery.min.js?v=2.1.4"></script>
<!-- 图片排序 -->
<script src="Sortable/Sortable.js"></script>
<script type="text/javascript" src="MD5.js"></script>
<script type="text/javascript" src="FraUpload.js"></script>
    

3. 实例化js对象

// 商品图片上传
a = $("#upload_duixiang").FraUpload({
    view        : ".show",      // 视图输出位置
    url         : "upload.php", // 上传接口
    fetch       : "img",   // 视图现在只支持img
    debug       : false,    // 是否开启调试模式
    /* 外部获得的回调接口 */
    onLoad: function(e){                    // 选择文件的回调方法
        console.log("外部: 初始化完成...");
    },
    breforePort: function (e) {         // 发送前触发
        console.log("文件发送之前触发");
    },  
    successPort: function (e) {         // 发送成功触发
        console.log("文件发送成功");
        onload_image()
    },
    errorPort: function (e) {       // 发送失败触发
        console.log("文件发送失败");
        onload_image()
    },
    deletePost: function(e){    // 删除文件触发
        console.log("删除文件");
        console.log(e);
        alert('删除了'+e.filename)
        onload_image()
    },
    sort: function(e){      // 排序触发
        console.log("排序");
        onload_image()
    },
});
    

4. 更新input表单数据

// 获取图片上传信息
function onload_image(){
    var res = a.FraUpload.show()
    var ids = [];
    for(let k in res){
        this_val = res[k]
        if(!empty(res[k]['is_upload']) && !empty(res[k]['ajax'])){
            ajax_value = res[k]['ajax'];
            ids.push(ajax_value.data.id)
        }
    }
    $("#imagepath").val(ids);
    $('#geoJsonTxt').html(JsonFormat(res));
}
    

5. 上述js所需方法

// 将类库返回的json打印到pre中
function JsonFormat(json) {
    if (typeof json != 'string') {
        json = JSON.stringify(json, undefined, 2);
    }
        json = json.replace(/&/g, '&').replace(//g, '>');
        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
             var cls = 'number';
                if (/^"/.test(match)) {
                        if (/:$/.test(match)) {
                            cls = 'key';
                        } else {
                            cls = 'string';
                        }
                } else if (/true|false/.test(match)) {
                    cls = 'boolean';
                } else if (/null/.test(match)) {
                    cls = 'null';
                }
                return '' + match + '';
         });
}
/**
 * 判断变量是否为空
 */
function empty(value) {
    if(value=="" || value==undefined || value==null || value==false || value==[] || value=={}){
        return true;
    }else{
        return false;
    }
}