我在这里和其他网站上查看了许多plUpload的例子。我从这些例子中获取了代码,并且有不同的形式可以工作,但没有一个能完全符合我的要求 - 手指交叉你们会帮助我找到解决方案。
我目前有一个由表行组成的数据输入表单,每行允许上传图像。此表单提交给PHP并存储图像/数据。
我想将图片上传例程移到plUpload,以便更好地使用旧版/更多浏览器并允许客户端图像调整大小等。
从我所看到的,我需要核心plUpload和jQuery模块的混合,以允许实例通过类而不是id绑定,但是我沿着那条路走下去,撞到了一堵砖墙。我现在一直在看这里发现的另外两位代码(对不起,我已经忘记了作者姓名),并提出了以下内容。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="../js/plupload.full.min.js"></script>
<form id="form" action="" multipart method="post">
<div id="container1" class="gallery">
<a id="pickfiles1" href="javascript:;">[Select files]</a>
<a id="uploadfiles1" href="javascript:;">[Upload files]</a>
</div>
<div id="container2" class="gallery">
<a id="pickfiles2" href="javascript:;">[Select files]</a>
<a id="uploadfiles2" href="javascript:;">[Upload files]</a>
</div>
<input type="submit" /></input>
</form>
<p><label>Debug data:</label><div id="debug"></div></p>
<div id="uploaded"></div>
<script>
function initUploader(itemIndex) {
var uploader1 = new plupload.Uploader({
runtimes: 'html5,html4,flash,silverlight,browserplus',
browse_button: 'pickfiles'+itemIndex,
container: 'container'+itemIndex,
max_file_size: '10mb',
max_retries: 3,
chunk_size: '1mb',
url: 'upload.php',
unique_names: false,
preserve_headers: false,
flash_swf_url: 'http://www.plupload.com/plupload/js/plupload.flash.swf',
silverlight_xap_url: 'http://www.plupload.com/plupload/js/plupload.silverlight.xap',
filters: [
{
title: "Image files",
extensions: "jpg,gif,png"}
],
resize: {width : 320, height : 240, quality : 90}
});
uploader1.bind('Init', function(up, params) {
$('#filelist'+itemIndex).html("<div>Current runtime: " + params.runtime + "</div>");
});
$('#uploadfiles'+itemIndex).click(function(e) {
uploader1.start();
e.preventDefault();
});
uploader1.init();
uploader1.bind('UploadProgress', function(up, file) {
$('#' + file.id + " b").html(file.percent + "%");
});
uploader1.bind('Error', function(up, err) {
$('#filelist'+itemIndex).append("<div>Error: " + err.code +
", Message: " + err.message +
(err.file ? ", File: " + err.file.name : "") +
"</div>"
);
up.refresh(); // Reposition Flash/Silverlight
});
uploader1.bind('FilesAdded', function(up, files) {
$.each(files, function(i, file) {
$('#debug').prepend('Uploading ' + file.name + ' (' + file.size + ' bytes)');
});
// up.refresh();
// up.start();
});
uploader1.bind('FileUploaded', function(up, file) {
// $('#' + file.id + " b").html("100%");
$('#uploaded').prepend('<p><a href="' + public_url + file.name + '" target="_blank"><img src="' + public_url + file.name + '" width="100"/></a></p>');
});
}
$('#form').submit(function(e) {
// Files in queue upload them first
alert("Submit");
var uploader = $('#container2').plupload('getUploader');
// Validate number of uploaded files
if (uploader.total.uploaded == 0)
{
// Files in queue upload them first
if (uploader.files.length > 0)
{
// When all files are uploaded submit form
uploader.bind('UploadProgress', function ()
{
$('#uploader1').on('complete', function() {
alert("Complete - wait for rest");
$('#form').submit();
});
});
$('#uploader1').plupload('start');
} else { $('#form').submit();}
//alert('You must at least upload one file.');
e.preventDefault();
} else { $('#form').submit();}
});
initUploader(1);
initUploader(2);
</script>
例程将允许我selet文件,但我不能在表单提交上提交..
任何帮助指明我正确方向的人都将不胜感激。