我在我的应用程序中使用了Plupload插件。但我无法在同一页面上应用多个实例。这是我的代码。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Plupload - Custom example</title>
<!-- production -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="../js/plupload.full.min.js"></script>
<!-- debug
<script type="text/javascript" src="../js/moxie.js"></script>
<script type="text/javascript" src="../js/plupload.dev.js"></script>
-->
</head>
<body style="font: 13px Verdana; background: #eee; color: #333">
<h1>Custom example</h1>
<p>Shows you how to use the core plupload API.</p>
<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>
<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">
// 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: 'upload.php',
flash_swf_url: '../js/Moxie.swf',
silverlight_xap_url: '../js/Moxie.xap',
filters: {
max_file_size: '10mb',
mime_types: [
{title: "Image files", extensions: "jpg,gif,png"},
{title: "Zip files", extensions: "zip"}
]
},
init: {
PostInit: function() {
document.getElementById('filelist').innerHTML = '';
document.getElementById('uploadfiles').onclick = function() {
uploader.start();
return false;
};
},
FilesAdded: function(up, files) {
$.each(files, function(i, file) {
$('#filelist').append(
'<div id="' + file.id + '">' +
file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' +
'<a href="" class="remove btn error">X</a></div>'
);
$('#uploadfiles').css('display', 'initial');
$('#filelist').append('<br/>');
$('#' + file.id + ' a.remove').first().click(function(e) {
e.preventDefault();
up.removeFile(file);
$('#' + file.id).next("br").remove();
$('#' + file.id).remove();
if (up.files.length == 0) {
$('#uploadfiles').css('display', 'none');
}
});
});
},
FilesRemoved: function(up, files) {
// Called when files where removed from queue
console.log('[FilesRemoved]');
plupload.each(files, function(file) {
console.log(' File:', file);
});
},
removeFile: function(file) {
var i;
for (i = files.length - 1; i >= 0; i--) {
if (files[i].id === file.id) {
return this.splice(i, 1)[0];
}
}
},
splice: function(start, length) {
var removed;
// Splice and trigger events
removed = files.splice(start === undef ? 0 : start, length === undef ? files.length : length);
this.trigger("FilesRemoved", removed);
this.trigger("QueueChanged");
return removed;
},
UploadProgress: function(up, file) {
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
},
FileUploaded: function(up, file, info) {
// Called when a file has finished uploading
console.log('[FileUploaded] File:', file, "Info:", info);
},
ChunkUploaded: function(up, file, info) {
// Called when a file chunk has finished uploading
console.log('[ChunkUploaded] File:', file, "Info:", info);
},
Error: function(up, args) {
// Called when a error has occured
console.log('[error] ', args);
}
}
});
uploader.init();
</script>
</body>
</html>
我知道问题是因为唯一ID。有没有办法用这个实现多个上传实例。这里第一次上传工作正常。
应该感谢任何帮助。