Question

我是PLUPLOAD的新手，这给我带来了一些悲伤。

我尝试上传一些文件（当前正常工作），然后在upload.php文件中重命名，然后将新文件名返回到表单提交页面，这样我就可以将它们插入到数据库中。

<?php

if (empty($_FILES) || $_FILES["file"]["error"]) {
  die('{"OK": 0}');
}

$fileName = $_FILES["file"]["name"];

move_uploaded_file($_FILES["file"]["tmp_name"], "uploads/$fileName");

$uid = rand(0000000000,9999999999);
$fileExt = pathinfo($fileName, PATHINFO_EXTENSION);

rename("uploads/$fileName", "uploads/$uid".".$fileExt");
?>

我想将新文件名返回到表单提交页面...

    <!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 type="text/javascript" src="../js/plupload.full.min.js"></script>
    <script src="http://code.jquery.com/jquery-latest.min.js"
            type="text/javascript"></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>
    <input type="text" name="name1" id="name1" value="" />
</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',
    max_file_count: 1,
    max_total_queue: 1,
    unique_names: true,

    resize: {
        width: 680,
        height: 530,
        crop: true,
        quality: 90
    },

    filters : {
        max_file_size : '10mb',
        mime_types: [
            {title : "Image files", extensions : "jpg,gif,png"},
            {title : "Zip files", extensions : "zip"}
        ]
    },

    multipart: true,
    multipart_params: {
        event_id : $("#event_id").val(),
        param2 : 'value2'},

    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>";
//            alert(file.percent);
        },

        Error: function(up, err) {
            document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message;
        }

    }
});


//bind completed upload
uploader.bind('UploadComplete', function() {
    if (uploader.files.length == (uploader.total.uploaded + uploader.total.failed)) {
        //$(".uploadlist").html('The output goes here');
        var obj = uploader.files;
        $.each( obj, function( key, value ) {
            alert( key + ": " + value.name );
            var content = '<p><input type="text" id="'+ value.id +'" class="track input input-xlarge" value="'+ value.name +'"></p>';
            $(".uploadlist").append(content);
            alert(value.id);
        });
//        $(".uploadlist").append('<button class="complete btn btn-large btn-info">Complete Upload</button>');
    }
});


uploader.init();

</script>

<p class="uploadlist">XX </p>

<p id="event_id"> AA </p>
</body>
</html>

Answer 1

您可以更改upload.php文件中的行，该文件将成功的json响应返回到以下内容：

die('{"jsonrpc" : "2.0", "result" : null, "id" : "id", "newfilename" : "'."$uid".".$fileExt".'"}');

然后你可以在jquery代码中将函数绑定到'FileUploaded'事件：

uploader.bind('FileUploaded', function(up, file, info) {
    //You should find the "newfilename" in this object somewhere
    console.log(info);
});

Answer 2

thanx Vivek。

这是我的最终代码

   <?php

if (empty($_FILES) || $_FILES["file"]["error"]) {
  die('{"OK": 0}');
}

$fileName = $_FILES["file"]["name"];

$fileName = preg_replace('/[^\w\._]+/', '', $fileName);

move_uploaded_file($_FILES["file"]["tmp_name"], "uploads/$fileName");

$uid = rand(0000000000,9999999999);
$fileExt = pathinfo($fileName, PATHINFO_EXTENSION);

rename("uploads/$fileName", "uploads/$uid".".$fileExt");

die('{"jsonrpc" : "2.0", "result" : null, "id" : "id", "newfilename" : "'."$uid".".$fileExt".'"}');

?>



   <!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 type="text/javascript" src="../js/plupload.full.min.js"></script>
    <script src="http://code.jquery.com/jquery-latest.min.js"
            type="text/javascript"></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>
    <input type="text" name="name1" id="name1" value="" />
</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',
    max_file_count: 1,
    max_total_queue: 1,
    unique_names: true,

    resize: {
        width: 680,
        height: 530,
        crop: true,
        quality: 90
    },

    filters : {
        max_file_size : '10mb',
        mime_types: [
            {title : "Image files", extensions : "jpg,gif,png"},
            {title : "Zip files", extensions : "zip"}
        ]
    },

    multipart: true,
    multipart_params: {
        event_id : $("#event_id").val(),
        param2 : 'value2'},

    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>";
//            alert(file.percent);
        },

        Error: function(up, err) {
            document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message;
        }

    }
});


uploader.bind('FileUploaded', function(up, file, response) {
    var obj = jQuery.parseJSON(response.response);
    var obj2 = eval(response);

    var JSONoutput = (response.toSource()); // <-- Outputs raw data
//    alert(obj2.toSource()); // <-- Outputs eval data format

    $("#event_id").append("<p>"+JSONoutput+"</p>");

    alert(obj.newfilename);

    var content = '<p><input type="text" id="'+ obj.id +'" class="track input input-xlarge" value="'+ obj.newfilename +'"></p>';
    $(".uploadlist").append(content);

    var images = '<p><img id="'+ obj.id +'" class="track input input-xlarge" src="uploads/'+ obj.newfilename +'"></p>';

    $(".imglist").append(images);

});



uploader.init();

</script>

<p class="uploadlist"> XX </p>

<p class="imglist"> XX </p>

<p id="event_id"> </p>

</body>
</html>

plupload - 通过JSON或任何其他方式将php变量传递回表单提交页面？

2 个答案: