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

怼烎@ 2022-06-05 11:22 246阅读 0赞

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

github下载地址

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

新建plupload.html页面

将ulupload复制到当前目录下

引入plupload

<script src="[pupload/plupload.full.min.js][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);
    }

[pupload_plupload.full.min.js]: http://pms.hilao.com/static/js/pupload/plupload.full.min.js

发表评论取消回复

表情：

评论列表（有 0 条评论，246人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue项目使用cropper.js实现单图上传、多图上传、裁剪、缩放图片

HTML代码 <template> <div> <div v-if="!onOff" class="initBox clearFix

小灰灰/ 2022年12月02日 00:40/ 0 赞/ 418 阅读

相关【Java】SpringMVC实现多张图片上传实例

实现在Springmvc中上传图片功能很好实现。需求是将多张或单张图片上传至某个文件夹下，同时保存在数据库中和服务器上。现在我将会展现完整例子。 1、前提：在pom中添加相关

﹏ヽ暗。殇╰゛Y/ 2022年06月15日 04:46/ 0 赞/ 300 阅读

相关 PHP实现多图片上传

今天在工作中遇到了一个需求：一个表单实现多个上传图片，类似于QQ空间上传照片的模式。即：可以一次性上传多个图片，但是封面图片只有一个。最先，最重要的事，在服务器上对文件进行

亦凉/ 2022年06月08日 04:07/ 0 赞/ 319 阅读

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

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

怼烎@/ 2022年06月05日 11:22/ 0 赞/ 247 阅读

相关使用jquery实现多张图片的上传

最近做项目要用到上传多张图片的功能，自己用jquery写了一个图片上传，期间遇到一个麻烦，就是给后台传的时候总是会覆盖前面一张的图片，只能传过去一张图片，最后解决的办法就是创建

川长思鸟来/ 2022年06月04日 05:08/ 0 赞/ 593 阅读

相关 springmvc实现多图片上传

springmvc实现多图片上传：主要是项目要做的是一个发表分享的功能，就有点像微信发朋友圈那样，一个内容文字和图片显示。思路：用form表单提交，在f

男娘i/ 2022年05月25日 13:42/ 0 赞/ 331 阅读

相关 springmvc 实现页面上传文件/图片

目的：使用springmvc上传文件/图片项目整体预览： ![70][] 第一步：导入相对应的jar包（） ![70 1][] 第二步：web.xm

柔情只为你懂/ 2022年05月16日 01:15/ 0 赞/ 269 阅读

相关 TP5 webuploader 单页面多实例上传图片案例

在使用 webuploader上传文件过程中，如果同一个页面存在多个上传区域，可以参考本示例代码。 HTML 代码： 1 <!DOCTYPE html>

超、凢脫俗/ 2021年12月22日 15:34/ 0 赞/ 292 阅读

相关移动端使用vue单页面图片上传

效果如下： ![70][] 图片验证签名验证信息 url如下：图片验证信息与后端同学进行对接，可通过接口或url传递到前端。 http://192.168

柔光的暖阳◎/ 2021年09月15日 15:48/ 0 赞/ 305 阅读

相关同一个页面使用webuploader实现多实例多上传案例

项目上遇到一个需求，要实现一个页面有多个上传图片入口，我们使用的是`webuploader`上传组件；研究了一下终于弄好了这个功能，主要是动态获取上传按钮id和需要展现缩

男娘i/ 2021年06月26日 16:06/ 0 赞/ 413 阅读