博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Ajax上传控件封装,支持图片简介、支持图片前台压缩1
阅读量:6928 次
发布时间:2019-06-27

本文共 2399 字,大约阅读时间需要 7 分钟。

hot3.png

Demo演示地址(升级至Uploader6.0):

GitHub地址:

1.简单文件上传

    
    
        文件名:
    

 

131519_kZPR_2332115.jpg

2.简单图片上传

    图片:    
    /*    * 简单上传图片    */    var uploader = $('#uploadBtn').uploader({        url: '../ashx/upload3.0.ashx',        fileTypeExts: 'jpg;png',        text: '选择图片',        maxSize: 1024 * 1000,        onSuccess: function (data) {            $('#imgOne').attr('src', '/content/tempfile/' + data);        }    });    /*    * 确定上传移动文件到上传目录    */    $('#btnOne').click(function () {        $.post('../ashx/MoveOne.ashx', {            filename:uploader.getFileName()        }, function (data) {            alert(data);        })    });

 

131519_jOI8_2332115.jpg

3.剪切上传图片1

    图片:100*100px;    
    
    /*    * 剪切上传图片    */    var uploader = $('#uploadBtnOne').uploader({        url: '../ashx/upload3.0.ashx',        type: 'dialog',        text: '选择图片',        maxSize: 1024 * 1024 * 10,        onSuccess: function (data) {            //$('#imgOne').attr('src', '/content/tempfile/' + data);            //判断是否支持filereader            if (uploader.isSupportClip()) {                $('#imgOne').attr('src', '/content/tempfile/' + data);            } else {                var dataList = data.split('|');                $('#imgOne').attr('src', '/content/tempfile/' + dataList[1]);            }        }    });

 

131520_50rb_2332115.jpg

4.剪切上传图片2

    图片:200*100px;    
    
    /*    * 剪切上传图片    */    var uploader = $('#uploadBtnOne').uploader({        url: '../ashx/upload3.0.ashx',        fileTypeExts: 'jpg;png;gif',        type: 'dialog',        text: '选择图片',        maxSize: 1024 * 1000,        onSuccess: function (data) { //如果使用coverParams参数,onSuccess失效        },        coverParams: {            width: 680,            targetWidth: 200,            targetHeight: 200,            onYes: function (obj, data) {                //判断是否支持filereader                if (uploader.isSupportClip()) {                    $('#imgOne').attr('src', '/content/tempfile/' + data);                } else {                    var dataList = data.split('|');                    $('#imgOne').attr('src', '/content/tempfile/' + dataList[1]);                }            }        }    });

 

 

131520_e3CE_2332115.jpg

 

转载于:https://my.oschina.net/tianma3798/blog/598799

你可能感兴趣的文章
ngRx 官方示例分析 - 5. components
查看>>
android面试题总结加强再加强版(一)
查看>>
kubernetes中port、target port、node port的对比分析,以及kube-proxy代理
查看>>
BZOJ 4568: [Scoi2016]幸运数字 [线性基 倍增]
查看>>
Linux网络故障排查
查看>>
Jenkins配置基于角色的项目权限管理
查看>>
codevs原创抄袭题 5960 信使
查看>>
关于css解决俩边等高的问题(等高布局)
查看>>
Spark1.0.0 生态圈一览
查看>>
MySQL常用数据类型
查看>>
[Typescript] Generics using TypeScript
查看>>
eclipse在search的时候,通过search打开的页面会覆盖之前打开的页面
查看>>
[Go] 判断 文件/文件夹 是否存在?
查看>>
第二百三十节,jQuery EasyUI,后台管理界面---后台管理
查看>>
SQL Server 中统计信息直方图中对于没有覆盖到谓词预估以及预估策略的变化(SQL2012-->SQL2014-->SQL2016)...
查看>>
V-rep学习笔记:main script and child scripts
查看>>
浅拷贝(在进行当中一个对象的运算时开辟新的空间)
查看>>
HDU Today HDU杭电2112【Dijkstra || SPFA】
查看>>
通过docker-compose构建ghost博客(二)
查看>>
Hive merge(小文件合并)
查看>>