使用Pluploader在不同文件夹中以不同尺寸上传图片 [英] Image upload with different sizes in different folders using Pluploader
本文介绍了使用Pluploader在不同文件夹中以不同尺寸上传图片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想使用 plupload 进行简单的上传，以 thumb ，中等，完整多种尺寸并设置到他们的不同文件夹的位置，
我已经试过用于将文件上传到不同位置的代码，但无法调整该特定文件夹的图像大小。
这里存储了所有三个相同大小的文件。
这里我尝试过的是：
> 我的代码是：
$ b $
< html> ;
< head>
< title> TODO提供标题< / title>
< meta charset =UTF-8>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0>
< script src =https://code.jquery.com/jquery-2.1.4.min.jstype =text / javascript>< / script>
< script type =text / javascriptsrc =plupload.full.min.js>< / script>
< / head>
< body>
< div id =filelist>您的浏览器不支持Flash，Silverlight或HTML5。< / div>
< br />
< div id =container>
< a id =pickfileshref =javascript：;> [选择文件]< / a>
< a id =uploadfileshref =javascript：;> [上传文件]< / a>
< / div>
< br />
< pre id =console>< / pre>
< script type =text / javascript>
var folder ='';
var i = 0;
folder ='full';
//自定义示例逻辑
var uploader = new plupload.Uploader（{
运行时：'html5，flash，silverlight，html4'，
browse_button：'pickfiles'，//你可以传入id ...
container：document.getElementById（'container'），// ...或DOM Element本身
$ b $ url：http：// localhost / plupload_new /public_html/upload.php?diretorio=+文件夹，
过滤器：{
max_file_size：'10mb'，
mime_types：[
{title：图像文件，扩展名：jpg，gif，png}，
{title：Zip文件，扩展名：zip}
]
}，
// Flash settings
flash_swf_url：'/plupload/js/Moxie.swf'，
// Silverlight设置
silverlight_xap_url：'/plupload/js/Moxie.xap'，
init：{
PostInit：function（）{
document.getElementById（'filelist'）。innerHTML ='';
document.getElementById（'uploadfiles'）。onclick = function（）{
uploader.start（）;
返回false;
};
}，
FilesAdded：function（up，files）{
plupload.each（files，function（file）{
document.getElementById（'filelist'）。innerHTML + = '< div id ='+ file.id +'>'+ file.name +'（'+ plupload.formatSize（file.size）+'）< b>< / b>< div>';
}）;
}，
UploadProgress：function（up，file）{
document.getElementById（file.id）.getElementsByTagName（'b'）[0] .innerHTML ='< span>' + file.percent +％< / span>;
}，
错误：function（up，err）{
document.getElementById（'console'）。innerHTML + =\\\
Error＃+ err.code +：+ err.message;
}
}
}）;
var i = 1;
uploader.bind（'BeforeUpload'，function（up，file）{
if（'thumb'in file）{
if（i == 1）{
// thumb
up.settings.url ='http：//localhost/plupload_new/public_html/upload.php？diretorio = thumb'，
up.settings.resize = {width：50，height：50，质量：50};
}其他{
//中等大小
up.settings.url ='http：//localhost/plupload_new/public_html/upload.php？diretorio = medium'，
up.settings.resize = {width：400，height：600，quality：70};
}
} else {
up.settings.url ='http：/ /localhost/plupload_new/public_html/upload.php?diretorio=full'，
up.settings.resize = {quality：100};
}
uploader.bind （'FileUploaded'，function（up，file）{
if（！（'thumb'in file））{
file.thumb = true;
file.loaded = 0;
file.percent = 0;
file.status = plupload.QUEUED;
up.trigger（QueueChanged）;
up.refresh（）;
} else {
i ++;
file.medium = true;
file.loaded = 0;
file.percent = 0;
file.status = plupload.QUEUED;
up.trigger（QueueChanged）;
up.refresh（）;
}
}）;
}）;
uploader.init（）;
< / script>
< / body>
< / html>
任何帮助将不胜感激
感谢我已经找到了解决方案，这是对我发布的代码进行非常小的更改，唯一的问题是，我需要改变的是我已经在我的resize参数中添加了属性 enabled：true ，例如，
up.settings.resize = {width：80，height：80，enabled：true};
I want to make simple upload using plupload which takes image and convert that to multiple size like thumb,medium,full and set to their different folders location,
I have tried the code for that which run well for uploading files to different location but can't resize the image for that particular folder.
It is storing all three files with same size.
Here what I have tried is:
My Code Is:
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="plupload.full.min.js"></script>
</head>
<body>
<div id="filelist">Your browser doesn't have Flash, Silverlight or HTML5 support.</div>
<br />
<div id="container">
<a id="pickfiles" href="javascript:;">[Select files]</a>
<a id="uploadfiles" href="javascript:;">[Upload files]</a>
</div>
<br />
<pre id="console"></pre>
<script type="text/javascript">
var folder = '';
var i = 0;
folder = 'full';
// Custom example logic
var uploader = new plupload.Uploader({
runtimes: 'html5,flash,silverlight,html4',
browse_button: 'pickfiles', // you can pass in id...
container: document.getElementById('container'), // ... or DOM Element itself
url: "http://localhost/plupload_new/public_html/upload.php?diretorio=" + folder,
filters: {
max_file_size: '10mb',
mime_types: [
{title: "Image files", extensions: "jpg,gif,png"},
{title: "Zip files", extensions: "zip"}
]
},
// Flash settings
flash_swf_url: '/plupload/js/Moxie.swf',
// Silverlight settings
silverlight_xap_url: '/plupload/js/Moxie.xap',
init: {
PostInit: function () {
document.getElementById('filelist').innerHTML = '';
document.getElementById('uploadfiles').onclick = function () {
uploader.start();
return false;
};
},
FilesAdded: function (up, files) {
plupload.each(files, function (file) {
document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
});
},
UploadProgress: function (up, file) {
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
},
Error: function (up, err) {
document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message;
}
}
});
var i = 1;
uploader.bind('BeforeUpload', function (up, file) {
if ('thumb' in file) {
if (i == 1) {
//thumb
up.settings.url = 'http://localhost/plupload_new/public_html/upload.php?diretorio=thumb',
up.settings.resize = {width: 50, height: 50, quality: 50};
} else {
// medium size
up.settings.url = 'http://localhost/plupload_new/public_html/upload.php?diretorio=medium',
up.settings.resize = {width: 400, height: 600, quality: 70};
}
} else {
up.settings.url = 'http://localhost/plupload_new/public_html/upload.php?diretorio=full',
up.settings.resize = {quality: 100};
}
uploader.bind('FileUploaded', function (up, file) {
if (!('thumb' in file)) {
file.thumb = true;
file.loaded = 0;
file.percent = 0;
file.status = plupload.QUEUED;
up.trigger("QueueChanged");
up.refresh();
} else {
i++;
file.medium = true;
file.loaded = 0;
file.percent = 0;
file.status = plupload.QUEUED;
up.trigger("QueueChanged");
up.refresh();
}
});
});
uploader.init();
</script>
</body>
</html>
Any help would be appreciated
Thank you in advance.
解决方案
I have found the solution,which is a very small change to my code posted in question,the only thing i need to change is i have added attribute enabled:true in my resize parameter like,
up.settings.resize = {width: 80, height: 80, enabled: true};
这篇关于使用Pluploader在不同文件夹中以不同尺寸上传图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
