webuploader 多图上传,修改信息时,如何回显这些图片

现在已经实现多图上传,但是不太清楚如何在修改时回显,模拟插件添加图片,但是模拟的方法有错,

var files=[{"id":"WU_FILE_0","name":"1478598670983.jpg","type":"image/jpg","size":1523,"url":"../uploadImg/1478598670983.jpg"},{"id":"WU_FILE_1","name":"1478598674559.jpg","type":"image/jpg","size":1523,"url":"../uploadImg/1478598674559.jpg"},{"id":"WU_FILE_2","name":"1478598677967.jpg","type":"image/jpg","size":1523,"url":"../uploadImg/1478598677967.jpg"}];
                                    for(var i = 0; i < files.length; i++){  
                                        var obj ={};  
                                        statusMap = {};  
                                        fileCount++;  
                                        fileSize += files[i].size;  
                                        if ( fileCount === 1 ) {  
                                            placeholder.addClass( 'element-invisible' );  
                                            statusBar.show();  
                                        }  
                                        obj.id=files[i].id;  
                                        obj.name=files[i].name;  
                                        obj.type=files[i].type;  
                                        obj.size=files[i].size;  
                                        obj.ret=files[i].url;  
                                        obj.source=this;  
                                        obj.flog=true;  
                                        obj.status = 'complete',  
                                        obj.getStatus = function(){  
                                            return '';  
                                        }  
                                        obj.version = WebUploader.Base.version;  
                                        obj.statusText = '';  
                                        obj.setStatus = function(){  
                                            var prevStatus = statusMap[this.id];  
                                            typeof text !== 'undefined' && (this.statusText = text);  
                                            if(status !== prevStatus){  
                                                statusMap[this.id] = status;  
                                                //文件状态设置为已完成  
                                                uploader[index].trigger('statuschage',status,prevStatus);  
                                            }  
                                        }  
                                        addFile( obj,uploader[index],queue);  
                                        setState( 'ready' ,uploader[index],placeholder,queue,statusBar,jxfilePicker);  
                                        updateStatus('ready',info,fileCount,fileSize);  
                                    } 

这样图片不会出现,只会有预览中三个字,感觉思路混乱,望指点

阅读 18.8k
5 个回答

首先向图片转成File类型,然后通过addFiles把图片添加到队列。

//初始化
var uploader = WebUploader.Uploader({...});

var getFileBlob = function (url, cb) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.responseType = "blob";
  xhr.addEventListener('load', function() {
  cb(xhr.response);
  });
  xhr.send();
};

var blobToFile = function (blob, name) {
  blob.lastModifiedDate = new Date();
  blob.name = name;
  return blob;
};

var getFileObject = function(filePathOrUrl, cb) {
  getFileBlob(filePathOrUrl, function (blob) {
  cb(blobToFile(blob, 'test.jpg'));
  });
};

//需要编辑的图片列表
var picList = ['图片url','图片url','图片url','图片url' ]
$.each(picList, function(index,item){
  getFileObject(item, function (fileObject) {
    var wuFile = new WebUploader.Lib.File(WebUploader.guid('rt_'),fileObject);
    var file = new WebUploader.File(wuFile);
    uploader.addFiles(file)
  })
});
新手上路,请多包涵

请问你这个问题难题解决了吗?

//接收服务器返回信息
        //这里才是接收服务器信息的地方,如果有出错就 `return false` 来停止上传
        uploader.on( 'uploadAccept', function( file, response ) {
            var str = response._raw;
            var info = eval('(' + str + ')');
            console.log(info);
            //if ( hasError ) {
            //    // 通过return false来告诉组件,此文件上传有错。
            //    return false;
            //}
        });

服务器上传完就用它接收地址呗

新手上路,请多包涵

我也是,可以上传,但是编辑的时候怎么解决

新手上路,请多包涵

修改时调用方法:
var getFileBlob = function (url, cb) {

var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.responseType = "blob";
xhr.addEventListener('load', function () {
    cb(xhr.response);
});
xhr.send();

};
var blobToFile = function (blob, name) {

blob.lastModifiedDate = new Date();
blob.name = name;
return blob;

};
var getFileObject = function (filePathOrUrl, cb) {

getFileBlob(filePathOrUrl, function (blob) {
    cb(blobToFile(blob, filePathOrUrl));
});

};
rows[0].data.Pics是后台返回回来的数据
格式是这种:[{"OldName":"2.jpg","SavePath":"/Upload/2.jpg"},{"OldName":"2c3a4f63&690.jpg","SavePath":"/Upload/3.jpg"}]

var picList = JSON.parse(rows[0].data.Pics);

$.each(picList, function (index, item) {

getFileObject(item.SavePath, function (fileObject) {
    var wuFile = new WebUploader.Lib.File(WebUploader.guid('rt_'), fileObject);
    var file = new WebUploader.File(wuFile);
    var m = { OldName: item.OldName, SavePath: item.SavePath };
    FileValue.push(m);//这里是我临时存放的数据,后面可能还会新增图片。也会加在这里面
    uploader.addFiles(file);
    $("#" + file.id).attr("jsrc", item.SavePath);//这是我添加的一个属性,可以不要
    $("#" + file.id).find(".title").html(item.OldName);//这是控件中的一个title
})

});

QQ截图20200509154019.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏