webuploader的问题,上传到后台没有问题,后台是使用php,但是现在想问的问题是怎么把数据放到容器里,数据可以取的出来,但是就是不知道要放到哪里。
要放到哪个位置呢?大神帮帮忙,谢谢。
是从数据库读取出来的预览效果
webuploader的问题,上传到后台没有问题,后台是使用php,但是现在想问的问题是怎么把数据放到容器里,数据可以取的出来,但是就是不知道要放到哪里。
要放到哪个位置呢?大神帮帮忙,谢谢。
是从数据库读取出来的预览效果
你上传成功后,后台会返回上传成功的图片路径,用一个全局的数组保存这些图片地址.然后要使用的时候,遍历一遍生成img的列表,就能显示图片了.
不过我想题主想要的是不是预览效果啊???
上传预览
关键有两个点: 绑定uploader的两个事件fileQueued
,uploadSuccess
,
我把我自己部分代码写出来你作为参考吧:
1. 预览: 生成一个绑定了file.id的 html,方便后面上传成功后替换img地址.
uploader.on('fileQueued', function (file) { // file 是上传图片的File对象
var imgHtml = "<div id='" + file.id + "' class='image-content'>" +
"<img class='preview-image' alt='" + file.name + "' title='" + file.name + "'/>" +
"</div>"
var $li = $(imgHtml), // 预览内容对象
$img = $li.find('img'), // 图片对象
$pre = $("#" + me.previewId); // 预览id
$pre.html($li);
// 通过上传div对象插入imgHtml即可预览.
...
...
});
2. 返回结果赋值给img : 拿到后端返回的图片http地址
// file :上传文件File对象
// response: 后端返回图片结果
uploader.on('uploadSuccess', function (file, response) {
var $li = $('#' + file.id),
$button = $li.siblings(".image-thumbnail-footer").find('.image-upload-indicator');
$button.attr("title", "已上传");
$button.find("i").attr("class", "fa fa fa-check-circle text-success");
$li.find("img").attr("src", response);
});
虽然不是很明白题主的意思,但是如过图片少,想要预览的效果可以使用FileReader对象,将图片的base64保存到localstorage,刷新后再取出来显示,个人想法
<input id="upload" type='file' onchange="preview(this.files)">
<div id="uploadBtn">submit</div>
<script type="text/javascript">
files = localStorage.getItem('path');
function preview(files) {
for (var i = 0;i < files.length;i++) {
var reader = new FileReader();
reader.onload = function(event) {
localStorage.setItem('path',this.result);
};
reader.readAsDataURL(files[i]);
}
};
if(files) {
var image = new Image();
image.width = 100;
image.src = files;
document.body.appendChild(image);
}
</script>
不是很明白, 你的意思是你想要预览,但是不用插件的功能,自己后台捞数据然后实现,但是预览这个div不知道放哪里?
官方是这样的嘛
// 当有文件添加进来的时候
uploader.on( 'fileQueued', function( file ) {
var $li = $(
'<div id="' + file.id + '" class="file-item thumbnail">' +
'<img>' +
'<div class="info">' + file.name + '</div>' +
'</div>'
),
$img = $li.find('img');
// $list为容器jQuery实例
$list.append( $li );
// 创建缩略图
// 如果为非图片文件,可以不用调用此方法。
// thumbnailWidth x thumbnailHeight 为 100 x 100
uploader.makeThumb( file, function( error, src ) {
if ( error ) {
$img.replaceWith('<span>不能预览</span>');
return;
}
$img.attr( 'src', src );
}, thumbnailWidth, thumbnailHeight );
});
主要是这这部分
var $li = $(
'<div id="' + file.id + '" class="file-item thumbnail">' +
'<img>' +
'<div class="info">' + file.name + '</div>' +
'</div>'
),
$img = $li.find('img');
// $list为容器jQuery实例
$list.append( $li );
动态往容器里加div,你的图片比较多,这个class可以模仿这样动态加,至于最外面的容器放哪里,当然看你UI自己掂量了。上面的童鞋讲得挺清楚的
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
5 回答1.9k 阅读
上传成功后把 id 和访问地址存到 mysql,刷新的时候,php 后端再从 mysql 把图片信息列表拉出来显示。