使用plupload.js实现单页面多实例图片上传

工作中经常会遇到单页面多个上传模块的功能,比如身份证正反面。使用plupload.js可以非常简单的实现这个功能。

github下载地址

https://github.com/moxiecode/plupload/tree/master/js

新建plupload.html页面

将ulupload复制到当前目录下

引入plupload

<script src="pupload/plupload.full.min.js"></script>

引入jquery(jquery自己下载一下)

<script src="jquery.js"></script>

<table >
    <tr>
        <td><img id="image_1" src="" width="50px"></td>
        <td style="width: 150px; "><a name="update_image" href="javascript:" menu_id="1" >上传图片</a></td>
    </tr>
    <tr>
        <td><img id="image_2" src="" width="50px"></td>
        <td style="width: 150px; "><a name="update_image" href="javascript:" menu_id="2" >上传图片</a></td>
    </tr>
</table>

<script>
    $('[name="update_image"]').each(function(i,n) {
        var menu_id = $(n).attr('menu_id')
        var uploader = new plupload.Uploader({
            browse_button: n,
            url: "upload.php",
            max_file_size: '2mb',
            filters: [{title: "Image files", extensions: "jpg,gif,png"}]
        });
        uploader.init();
        uploader.bind('FilesAdded', function (uploader, files) {
            uploader.start();
        });
        uploader.bind('FileUploaded', function (uploader, files, data) {
            resultObj = eval("(" + data.response + ")");
            var imgUrl = resultObj.image_url;
            $('#image_' + resultObj.menu_id).attr('src', imgUrl);
        });
    });
</script>

新建upload.php

if(!is_dir('images')){
    mkdir('images');
}
$upload_path = 'images/'.$_FILES['file']['name'];
if(move_uploaded_file($_FILES['file']['tmp_name'],$upload_path)){
    $result['image_url'] = $upload_path;
    echo json_encode($result);
}