工作中經常會遇到單頁面多個上傳模組的功能,比如身份證正反面。使用plupload.js可以非常簡單的實現這個功能。

github下載地址

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

新建plupload.html頁面

將ulupload複製到當前目錄下

引入plupload

引入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);
}