看到一篇兼容性很强的图片无刷新裁剪上传的帖子,感觉很棒。分享下!~

废话不多说,上效果图。


适应各浏览器图片裁剪无刷新上传jQuery插件(转)

一、首先建立如下的一个page

<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
    <title></title>  
    <link href="tapmodo-Jcrop-1902fbc/css/jquery.Jcrop.min.css" rel="stylesheet" />  
    <script src="Scripts/jquery-1.7.1.min.js"></script>  
    <script src="tapmodo-Jcrop-1902fbc/js/jquery.Jcrop.min.js"></script>  
    <script src="imageCropperUpload.js"></script>  
    <script>  
        $(function () {  
  
            var btn = $("#Button1");  
  
            btn.cropperUpload({  
                url: "WebForm1.aspx",  
                fileSuffixs: ["jpg", "png", "bmp"],  
                errorText: "{0}",  
                onComplete: function (msg) {  
                    $("#testimg").attr("src", msg);  
                },  
                cropperParam: {//Jcrop参数设置,除onChange和onSelect不要使用,其他属性都可用  
                    maxSize: [100, 100],//不要小于50,如maxSize:[40,24]  
                    minSize: [70, 70],//不要小于50,如minSize:[40,24]  
                    bgColor: "black",  
                    bgOpacity: .4,  
                    allowResize: false,  
                    allowSelect: false,  
                    animationDelay:50  
                },  
                perviewImageElementId: "fileList", //设置预览图片的元素id    
                perviewImgStyle: { width: '700px', height: '500px', border: '1px solid #ebebeb' }//设置预览图片的样式    
            });  
  
            var upload = btn.data("uploadFileData");  
  
            $("#files").click(function () {  
                upload.submitUpload();  
            });  
        });  
    </script>  
</head>  
<body>  
    <div style="width: 400px; height: 300px; float:left">    
            <input id="Button1" type="button" value="选择文件" />    
            <input id="files" type="button" value="上传截图" />    
            <div id="fileList" style="margin-top: 10px; padding-top:10px; border-top:1px solid #C0C0C0;font-size: 13px; width:400px">    
                    
            </div>    
    </div>   
      
    <div id="testdiv" style="padding-top: 580px">  
        <img alt="" src="" id="testimg"/>  
    </div>   
</body>  
</html>  
HTML部分

相关文章:

  • 2022-12-23
  • 2021-12-13
  • 2022-01-19
  • 2022-02-22
  • 2022-12-23
  • 2022-12-23
  • 2021-11-21
猜你喜欢
  • 2021-11-18
  • 2021-12-18
  • 2021-07-23
  • 2022-01-11
  • 2021-12-18
  • 2022-01-12
  • 2021-12-07
相关资源
相似解决方案