Ajax上传控件封装，支持图片简介、支持图片前台压缩1

Demo演示地址（升级至Uploader6.0）：

http://www.gongjuji.net/uploader/

GitHub地址：

https://github.com/tianma3798/Uploader/

1.简单文件上传

<div class="divTwo" style="width:500px;">
    <div class="uploader" id="uploadBtn"></div>
    <div>
        文件名：<span class="fileName redFont"></span>
    </div>
</div>
<script>
    /*
    * 简单文件上传
    */
    var uploader = $('#uploadBtn').uploader({
        url: '../ashx/upload3.0.ashx',
        fileTypeExts: 'doc;docx',
        text: '上传word文档',
        maxSize: 1024 * 100,
        onSuccess: function (data) {
            $('.fileName').text(data);
        }
    });
</script>

 

2.简单图片上传

<div class="uploader" id="uploadBtn"></div>
<br />
<input  id="btnOne" type="button" value="肯定上传"/>
<br /><br />
<div>
    图片:
    <img id="imgOne" width="100" height="100" style="border:1px solid gray;" />
</div>
<script type="text/javascript">
    /*
    * 简单上传图片
    */
    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);
        })
    });
</script>

 

3.剪切上传图片1

<div class="uploader" id="uploadBtnOne"></div>
<div>
    图片:100*100px;
    <br />
    <img id="imgOne" width="100" height="100" style="border:1px solid gray;" />
</div>
<script type="text/javascript">
    /*
    * 剪切上传图片
    */
    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]);
            }
        }
    });
</script>

 

4.剪切上传图片2

<div class="uploader" id="uploadBtnOne"></div>
<div>
    图片:200*100px;
    <br />
    <img id="imgOne" width="200" height="200" style="border:1px solid gray;" />
</div>
<script type="text/javascript">
    /*
    * 剪切上传图片
    */
    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]);
                }
            }
        }
    });
</script>