午夜国产狂喷潮在线观看|国产AⅤ精品一区二区久久|中文字幕AV中文字幕|国产看片高清在线





    

    
    
    
        
        
    
    
    
    
        
        
        
        
        
        
        
        
        
        
        
        
    
    

    

    
    
    
        
        
    
            
    jQuery插件jcrop+Fileapi完美實(shí)現(xiàn)圖片上傳+裁剪+預(yù)覽的代碼分享
    
            
    來源：易賢網(wǎng)  閱讀：2623 次  日期：2015-04-24 11:24:04 
    
            
    溫馨提示：易賢網(wǎng)小編為您整理了“jQuery插件jcrop+Fileapi完美實(shí)現(xiàn)圖片上傳+裁剪+預(yù)覽的代碼分享”,方便廣大網(wǎng)友查閱！
    
            
    
                        
    
            
    
             
    這篇文章主要介紹了jQuery插件jcrop+Fileapi完美實(shí)現(xiàn)圖片上傳+裁剪+預(yù)覽的代碼，非常的簡單實(shí)用，效果也很棒，有需要的小伙伴可以參考下。
    網(wǎng)頁端 裁剪圖片，不需要經(jīng)過服務(wù)器。
    這個(gè)是用 框架實(shí)現(xiàn)的。配合jcrop.
    高級瀏覽器 使用 canvas 裁剪，ie6 7 8使用 flash過度。
    核心代碼：
    var el = $('input').get(0);
    seajs.use(['gallery/jcrop/0.9.12/jcrop.css','gallery/jcrop/0.9.12/jcrop.js'] ,function(){
    FileAPI.event.on(el, 'change', function (evt){
    var files = FileAPI.getFiles(evt); // Retrieve file list
    FileAPI.filterFiles(files, function (file, info){
    if( !/^image/.test(file.type) ){
    alert('圖片格式不正確');
    return false;
    }
    else if(file.size > 20 * FileAPI.MB){
    alert('圖片必須小于20M');
    return false;
    }
    else{
    return true;
    }
    }, function (files, rejected){
    console.log(files);
    if( files.length ){
    var file = files[0];
    var img0 = FileAPI.Image(file);
    var img1 = FileAPI.Image(file);
    var ratio = 0;
    FileAPI.getInfo(file, function (err, info) { //get image ratio
    if (!err) {
    if (info.width > info.height) {
    ratio = info.width / 500;
    }
    else {
    ratio = info.height / 500;
    }
    }
    });
    img0.resize(500, 500, 'max') //place image and register jcrop
    .get(function(err, img) {
    $('#img2').empty();
    $('#img2').append($(img));
    $('#img2').children().Jcrop({
    aspectRatio: 1,
    bgColor: 'rgba(0,0,0,0.4)',
    onSelect: function(c) {
    img1.matrix.sx = c.x * ratio;
    img1.matrix.sy = c.y * ratio;
    img1.matrix.sw = c.w * ratio;
    img1.matrix.sh = c.h * ratio;
    img1.matrix.dw = 500;
    img1.matrix.dh = 500;
    img1.get(function(err, img) {
    // $('#img3').empty();
    // $('#img3').append($(img));
    $('#img3').html($(img));
    });
    }
    });
    });
    $('#btn').on('click',function(){
    FileAPI.upload({
    // url: '/testUpFile/upFile',
    // headers: { 'Content-Type': 'multipart/form-data' },
    files: { images: img1 },
    progress: function (evt){ /* ... */ },
    complete: function (err, xhr){ /* ... */
    //alert(xhr.responseText);
    console.log(xhr);
    }
    });
    });
    }
    });
    });
    });
    完整代碼：
    <!DOCTYPE html>
    <html>
    <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <script src="./jquery.min.js"></script>
    <script src="./jcrop/jquery.Jcrop.min.js"></script>
    <link href="./jcrop/jquery.Jcrop.min.css" rel="stylesheet">
    </head>
    <style>
    .upload-btn {
    width: 130px;
    height: 25px;
    overflow: hidden;
    position: relative;
    border: 3px solid #06c;
    border-radius: 5px;
    background: #0cf;
    }
    .upload-btn:hover {
    background: #09f;
    }
    .upload-btn__txt {
    z-index: 1;
    position: relative;
    color: #fff;
    font-size: 18px;
    font-family: "Helvetica Neue";
    line-height: 24px;
    text-align: center;
    text-shadow: 0 1px 1px #000;
    }
    .upload-btn input {
    top: -10px;
    right: -40px;
    z-index: 2;
    position: absolute;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
    font-size: 50px;
    }
    </style>
    <body>
    <div>
    <!-- "js-fileapi-wrapper" -- required class -->
    <div class="js-fileapi-wrapper upload-btn" id="choose">
    <input name="files" type="file" multiple />
    <button id="btn">上傳</button>
    </div>
    <div id="images">
    <p style="margin-top: 40px;"></p>
    <div id="img2" ></div>
    <div id="img3"></div>
    </div>
    </div>
    <script>window.FileAPI = { staticPath: './fileapi/' };</script>
    <script src="./fileapi/FileAPI.min.js"></script>
    <script>
    var el = $('input').get(0);
    FileAPI.event.on(el, 'change', function (evt){
    var files = FileAPI.getFiles(evt); // Retrieve file list
    FileAPI.filterFiles(files, function (file, info){
    if( !/^image/.test(file.type) ){
    alert('圖片格式不正確');
    return false;
    }
    else if(file.size > 20 * FileAPI.MB){
    alert('圖片必須小于20M');
    return false;
    }
    else{
    return true;
    }
    }, function (files, rejected){
    if( files.length ){
    var file = files[0];
    var img0 = FileAPI.Image(file);
    var img1 = FileAPI.Image(file);
    var ratio = 0;
    FileAPI.getInfo(file, function (err, info) { //get image ratio
    if (!err) {
    if (info.width > info.height) {
    ratio = info.width / 500;
    }
    else {
    ratio = info.height / 500;
    }
    }
    });
    img0.resize(500, 500, 'max') //place image and register jcrop
    .get(function(err, img) {
    $('#img2').empty();
    $('#img2').append($(img));
    $('#img2').children().Jcrop({
    aspectRatio: 1,
    bgColor: 'rgba(0,0,0,0.4)',
    onSelect: function(c) {
    img1.matrix.sx = c.x * ratio;
    img1.matrix.sy = c.y * ratio;
    img1.matrix.sw = c.w * ratio;
    img1.matrix.sh = c.h * ratio;
    img1.matrix.dw = 500;
    img1.matrix.dh = 500;
    img1.get(function(err, img) {
    // $('#img3').empty();
    // $('#img3').append($(img));
    $('#img3').html($(img));
    });
    }
    });
    });
    $('#btn').on('click',function(){
    FileAPI.upload({
    url: '/testUpFile/upFile',
    files: { images: img1 },
    progress: function (evt){ /* ... */ },
    complete: function (err, xhr){ /* ... */
    //alert(xhr.responseText);
    }
    });
    });
    }
    });
    });
    </script>
    </body>
    </html>
    以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
    

    更多信息請查看IT技術(shù)專欄
                
    
            
    
                        
    
            
    更多信息請查看腳本欄目
    
            
    
            
            
            
            
            
    由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考，敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)！
    
            
        
    
    
    
    
    
        

					
		
    
		
    
            
    
                
    2025國考·省考課程試聽報(bào)名
    
                
      

                    
    • 
                        報(bào)班類型
                        
                    
      • 
                    
    • 
                        姓名
                        
                    
      • 
                    
    • 
                        手機(jī)號(hào)
                        
                    
      • 
                    
    • 
                        驗(yàn)證碼
                        
                        
                    
      • 
                    
    • 
                        
						
                        
                    
      • 
                
    
            
    
        
    
		
    
        

        
    
    
    
    
    

    

    

    


    
    關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助
    | 非正式的簡要咨詢 | 簡要咨詢須知 |  新媒體/短視頻平臺(tái) | 手機(jī)站點(diǎn)  | 投訴建議 

    

    
     工業(yè)和信息化部備案號(hào)：滇ICP備2023014141號(hào)-1
    云南省教育廳備案號(hào)：云教ICP備0901021
    滇公網(wǎng)安備53010202001879號(hào) 
    人力資源服務(wù)許可證：（云）人服證字（2023）第0102001523號(hào)

    

    
    
    
        云南網(wǎng)警備案專用圖標(biāo)
    
    
    
    
        聯(lián)系電話：0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號(hào)：hfpxwx 
    
    咨詢QQ：1093837350（9:00—18:00）版權(quán)所有:易賢網(wǎng)
    
    
    
    
        云南網(wǎng)警報(bào)警專用圖標(biāo)