直播源码开发，实现相册的上传和缩放裁剪

图片上传

通过ajax 即可上传给后台

完整代码

CSS

<head><br>    <meta charset="UTF-8"><br>    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"><br>    <title>移动端图片上传</title><br>    <link href="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.css" rel="stylesheet"><br>    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><br>    <style><br>        .row {<br>            margin-bottom: 5px;<br>        }<br>        #photo {<br>            max-width: 100%;<br>        }<br>        .img-preview {<br>            width: 100px;<br>            height: 100px;<br>            overflow: hidden;<br>        }<br>        button {<br>            margin-top: 10px;<br>        }<br>        #result {<br>            width: 150px;<br>            height: 150px;<br>        }<br>    </style><br></head><br> 

Body

<body><br><div class="container"><br>    <div class="row"><br>        <div class="col-sm-12 text-center"><br>            <label for="input" class="btn btn-danger" id=""><br>                <span>选择图片</span><br>                <input type="file" id="input" class="sr-only"><br>            </label><br>        </div><br>    </div><br>    <div class="row"><br>        <div class="col-sm-6 col-sm-offset-2"><br>            <img src="" id="photo"><br>        </div><br>        <div class="col-sm-2"><br>            <div><br>                <p><br>                    预览(100*100)：<br>                </p><br>                <div class="img-preview"><br>                </div><br>            </div><br>            <button class="btn btn-primary" onclick="crop()">裁剪图片</button><br>            <div><br>                <br/><br>                <p><br>                    结果：<br>                </p><br>                <img src="" alt="裁剪结果" id="result"><br>            </div><br>        </div><br>    </div><br></div><br></body>

<!-- Scripts --><br><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><br><script src="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.js"></script><br><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><br><script><br>    // 修改自官方demo的js<br>    var initCropper = function (img, input) {<br>        var $image = img;<br>        var options = {<br>            aspectRatio: 1, // 纵横比<br>            viewMode: 2,<br>            preview: '.img-preview' // 预览图的class名<br>        };<br>        $image.cropper(options);<br>        var $inputImage = input;<br>        var uploadedImageURL;<br>        if (URL) {<br>            // 给input添加监听<br>            $inputImage.change(function () {<br>                var files = this.files;<br>                var file;<br>                if (!$image.data('cropper')) {<br>                    return;<br>                }<br>                if (files && files.length) {<br>                    file = files[0];<br>                    // 判断是否是图像文件<br>                    if (/^image\/\w+$/.test(file.type)) {<br>                        // 如果URL已存在就先释放<br>                        if (uploadedImageURL) {<br>                            URL.revokeObjectURL(uploadedImageURL);<br>                        }<br>                        uploadedImageURL = URL.createObjectURL(file);<br>                        // 销毁cropper后更改src属性再重新创建cropper<br>                        $image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);<br>                        $inputImage.val('');<br>                    } else {<br>                        window.alert('请选择一个图像文件！');<br>                    }<br>                }<br>            });<br>        } else {<br>            $inputImage.prop('disabled', true).addClass('disabled');<br>        }<br>    }<br>    var crop = function () {<br>        var $image = $('#photo');<br>        var $target = $('#result');<br>        $image.cropper('getCroppedCanvas', {<br>            width: 300, // 裁剪后的长宽<br>            height: 300<br>        }).toBlob(function (blob) {<br>            // 裁剪后将图片放到指定标签<br>            $target.attr('src', URL.createObjectURL(blob));<br>        });<br>    }<br>    $(function () {<br>        initCropper($('#photo'), $('#input'));<br>    });<br></script>