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>