File plupload上载单个图像文件
我一直在尝试修改以下小提琴: 我正在尝试获得以下功能: 1> 用户单击“拾取图像”按钮,文件将上载(正在工作)File plupload上载单个图像文件,file,file-upload,File,File Upload,我一直在尝试修改以下小提琴: 我正在尝试获得以下功能: 1> 用户单击“拾取图像”按钮,文件将上载(正在工作) 2> 用户再次单击“拾取图像”按钮,现有文件将替换为新文件。 3> 用户单击“删除”按钮,文件将被删除。 我正在努力想办法做到这一点。代码如下所示: $(document).ready(function() { var uploader = new plupload.Uploader({ runtimes : 'html5,flash,silverlight', b
2> 用户再次单击“拾取图像”按钮,现有文件将替换为新文件。
3> 用户单击“删除”按钮,文件将被删除。
我正在努力想办法做到这一点。代码如下所示:
$(document).ready(function() {
var uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight',
browse_button : 'pick-files',
max_file_size : '1mb',
multi_selection: false,
max_file_count: 1,
unique_names : true,
autostart: true,
url: "/echo/json",
flash_swf_url : 'http://rawgithub.com/moxiecode/moxie/master/bin/flash/Moxie.cdn.swf',
silverlight_xap_url : 'http://rawgithub.com/moxiecode/moxie/master/bin/silverlight/Moxie.cdn.xap',
filters : [
{title : "Image files", extensions : "jpg,png"}
],
init: {
PostInit: function() {
document.getElementById('pick-files').style.visibility = 'visible';
},
FilesAdded: function(up, files) {
plupload.each(files, function(file) {
if(uploader.files.length > 1){
//uploader.removeFile(uploader.getFile(this.id));
console.log(file.id);
// return;
}
var img = new o.Image();
img.onload = function() {
// create a thumb placeholder
var li = document.createElement('li');
li.id = this.uid;
document.getElementById('gallery').appendChild(li);
// embed the actual thumbnail
this.embed(li.id, {
width: 100,
height: 60,
crop: true
});
};
img.load(file.getSource());
});
},
Error: function(up, err) {
document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message;
}
}
});
uploader.init();
});
我试过了。您的路径是正确的,但看起来您正在删除正在添加的文件,而队列中已经有一个文件。当uploader.files.length>1时,您也不希望“返回”。这将使您脱离“each”,而代码的其余部分没有运行 第三部分是删除文件。为此,我绑定了按钮单击事件以删除文件 这是一个例子 下面是一些相关的代码片段
FilesAdded: function(up, files) {
plupload.each(files, function(file) {
if(uploader.files.length > 1){
removeImage(); //Call the removeImage() function and then continue
}
然后移除图像,这就是我所做的
uploader.init(); //<-- After initialising
document.getElementById('remove').onclick = function () {
removeImage();
};
function removeImage(){
if(uploader.files.length > 0){
uploader.removeFile(uploader.files[0].id);
document.getElementById('gallery').innerHTML = ''; //This will remove it from the page
}
}
uploader.init();//0){
uploader.removeFile(uploader.files[0].id);
document.getElementById('gallery')。innerHTML='';//这将从页面中删除它
}
}
这只是为了在只有一张图片的情况下快速删除它。可能有更好的方法来重置库,但我发现仅仅调用removeFile并不能将其从页面中移除,您需要重置innerHTML或将其从列表中拼接,等等。!正是我需要的。非常感谢!