jquery图片上传

文章目录

  1. 1. jquery-fileupload
    1. 1.1. 异步上传
    2. 1.2. 预览
    3. 1.3. 客户端裁剪

图片上传在web中也是经常用到,这里整理下

jquery-fileupload

File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for jQuery.
Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.

异步上传

  • 最小支持文件

    jquery.fileupload.css
    jquery.min.js
    jquery.ui.widget.js
    jquery.iframe-transport.js
    jquery.fileupload.js


    <div class="form-group">
        <label class="col-sm-2 control-label">图片</label>
        <div class="col-sm-4 form-control-static">
            <a target="_blank" href="" id="pic" style="display: none">
                <img width="128px" height="63px" src=""/>
            </a>
            <span class="btn btn-success fileinput-button btn-sm">
                 <i class="glyphicon glyphicon-plus"></i>
            <span>上传</span>
                <input class="uploadPicBtn" type="file" name="file">
            </span>
            <input type="hidden" name="pic" >
        </div>
    </div>
    
    //自定义processbar
    var processHtml = '<div id="progress" class="progress"><div class="progress-bar progress-bar-success"></div></div>';
    $('.uploadPicBtn').fileupload({
        url: '/upload/push',
        dataType: 'json',
        start: function (e) {
            $(e.target).parent().after(processHtml);
        },
        done: function (e, data) {
            if (data.result.result == false) {
                alert(data.result.msg);
                return;
            }
            var img_url = data.result.data[0].src;
            $('input[name=pic]').val(img_url);
            $('#pic').attr('href', img_url).show().find('img').attr('src', img_url);
            $('#progress').remove();
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css(
                'width',
                progress + '%'
            );
        }
    });
    

    预览

  • 使用imgeload load-image.all.min.js

    $('.fileupload').fileupload({
            disableImageResize: false,
            previewMaxWidth: 320,
            previewMaxHeight: 320
        }).bind('fileuploadprocessalways', function(e, data)
        {
            var canvas = data.files[0].preview;
            var dataURL = canvas.toDataURL();
            $("#test").attr("src", '' + dataURL +'').show();
        });
    
  • 使用filereader

    function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();            
                reader.onload = function (e) {
                    $('#target').attr('src', e.target.result);
                }      
                reader.readAsDataURL(input.files[0]);
            }
    }
    # 或
    $('.uploadPicBtn').fileupload({
        disableImageResize: false,
        previewMaxWidth: 320,
        previewMaxHeight: 320
    }).bind('fileuploadprocessalways', function(e, data)
    {
        var canvas = data.files[0].preview;
        var dataURL = canvas.toDataURL();
        $("#img-element").attr("src", '' + dataURL +'').show();
    });
    

demo: jquery-upload-preview 查看源码了解


客户端裁剪

  • Client-side-Image-Resizing

    $('.uploadPicBtn').fileupload({
        url: '/upload/push',
        dataType: 'json',
        // Enable image resizing, except for Android and Opera,
        // which actually support image resizing, but fail to
        // send Blob objects via XHR requests:
        disableImageResize: /Android(?!.*Chrome)|Opera/.test(window.navigator && navigator.userAgent),
        imageMaxWidth: 800,
        imageMaxHeight: 800,
        imageCrop: true // Force cropped images
    });
    

jquery-fileupload文档

如有疑问,请留言或邮件newbvirgil@gmail.com
本文链接 : http://blog.newbmiao.com/2015/09/23/some-code-when-use-jquery-fileupload.html