Js 之移动端图片上传插件mbUploadify

古城微笑少年丶 2023-08-17 17:27 150阅读 0赞

一、下载

[https://pan.baidu.com/s/1NEL4tkHoK4ydqdMi\_hgWcw][https_pan.baidu.com_s_1NEL4tkHoK4ydqdMi_hgWcw]

提取码：vx7e

二、Demo示例

<div class="weui_uploader_input_wrp">
                        <input class="weui_uploader_input js_file" id="j-file" name="file" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple >
                    </div>
    <script>
        new mbUploadify({
            file: document.getElementById('j-file'),
            size: 1024 * 1024 * 10,
            type: "image",
            /*ajax 上传地址*/
            url: '/api/a/upload.php?userid={$_userid}',
            /*ajax上传成功*/
            uploadSuccess: function(res){
                console.log(res);
                var json = JSON.parse(res);
                var html = `<li class="weui_uploader_file"
                            style="background-image:url(`+json.url+`)">
                            <span class="delete-img-btn aui-iconfont aui-icon-close" onclick="deleteImg(this)"></span>
                        </li>`;
                $(".weui_uploader_files").append(html);
    
            },
            error: function(file, msg){
                console.log(file, msg)
            },
        })
    </script>

三、插件文档

#mbUploadify.js
    ##html5移动端文件上传插件, 无依赖, 轻小
    
    
    在线演示：[http://www.byex.cn/mbUploadify](http://www.byex.cn/mbUploadify/)
    
    Written by: hishion
    
    ##使用一
    
    ####Step 1: 引入资源文件
    
    ```html
    <input type="file" name="files"  id="j-file" multiple>
    
    
    <script src="mbUploadify.min.js"></script>
    ```
    
    ####Step 2: 调用 mbUploadify 
    
    ```javascript
    var upload = new mbUploadify({
            file: document.getElementById('j-file'),
            /*ajax 上传地址*/
            url: 'mbUploadify.php',
            /*ajax上传成功*/
            uploadSuccess: function(res){
                console.log(res);
            },
            ......
        })
    ```
    
    ##使用二
    
    
    ####Step 1: 引入资源文件
    
    ```html
    <form action="mbUploadify.php" method="post">
        <label for="j-file2" class="mbUploadify" id="j-dropArea">
            拖拽文件上传
            <input type="file" name="files" id="j-file2"  multiple>
    
        </label>
        
        <input type="hidden" name="email" value="506713930@qq.com">
    </form>
    
    <script src="mbUploadify.min.js"></script>
    ```
    
    ####Step 2: 调用 mbUploadify 
    
    ```javascript
    var upload2 = new mbUploadify(document.querySelector('form'), {
            /*文件拖拽上传区域对象 null表示不支持拖拽上传*/
            dropElement: document.getElementById('j-dropArea'),
            ......
        });
    ```
    
    
    
    ##配置项
    
    构造函数 mbUploadify 的参数个数可选, 其中第二个参数配置项列表如下. 当只有一个form对象作参数时，系统会从form对象里面查找file, url, uploadName配置项.
    ```
    var upload = new mbUploadify(form, {
        //input file控件对象
        file: '',
        //上传类型
        type: 'image',
        //上传最多个数
        maximum: 5,
        //文件大小 2M
        size: 1024*1024*2,
        //html5中reader对象解析类型 可选 [string | text | url]
        rendAsType: 'url',
        //上传时后端 接收的 name
        uploadName: '',
        //上传地址
        url: '',
        //错误提示信息!
        message: {
            type: '类型不对!',
            size: '文件太大',
            maximum: '上传文件数量太多!',
            same: '不能上传相同的文件!',
            other: '其它网络错误!'
        },
        //是否多选
        isMultiple: true,
        //是否允许提交重复的文件
        isAllowSame: false,
        
        //文件拖拽上传区域对象 null表示不支持
        dropElement: null,
        //文件拖拽dragenter事件回调
        dragenter: function(){},
        //文件拖拽dragleave事件回调
        dragleave: function(){},
        //文件拖拽dragover事件回调
        dragover: function(){},
        //文件拖拽drop事件回调
        drop: function(){},
    
        //ajax上传成功 回调
        uploadSuccess: function(){},
        //ajax上传失败 回调
        uploadFailed: function(){},
        //ajax上传完成
        uploadComplete: function(){},
    
        //上传中止
        abort: function(){},
        //上传失败
        error: function(file, msg){},
        //上传开始
        loadstart: function(){},
        //上传进度
        progress: function(){},
        //上传成功
        load: function(){},
        //上传完成，不管成功失败
        loadend: function(){},
        //ajax上传成功
        uploadSuccess: function(){},
        //ajax上传失败
        uploadFailed: function(){},
        //ajax上传完成
        uploadComplete: function(){}
    });
    ```

转载于:https://www.cnblogs.com/yang-2018/p/11243081.html

[https_pan.baidu.com_s_1NEL4tkHoK4ydqdMi_hgWcw]: https://pan.baidu.com/s/1NEL4tkHoK4ydqdMi_hgWcw