美圖秀秀上傳圖片案例1

時間 2019-12-01

標籤上傳圖片案例简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
<title>美圖WEB開放平臺</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/xiuxiu.css" />
<script type="text/javascript" src="plugin/jquery/jquery-1.11.1.js"></script>
<script src="http://open.web.meitu.com/sources/xiuxiu.js" type="text/javascript"></script>
<script type="text/javascript" src="js/xiuxiu.js"></script>
</head>
<body>

<div class="xiuxiuUploadImg"> 
    <div id="xiuxiuFlashBox"></div>
</div>

</body>
</html>

xiuxiu.css文件javascript

/*@charset "UTF-8";*/
.xiuxiuUploadImg { width:600px; height:400px; padding:1px; border:1px solid #666; background:#666; margin:5px }

xiuxiu.js文件php

$(function(){
    //自定義函數
    function xiuxiuUploadImg(xiuxiuFlashBox,editorType,uploadUrl,uploadType,uploadDataFieldName,defaultImgUrl,cropPresets){
        //設置裁剪的比例或尺寸,請在xiuxiu.embedSWF以前調用此函數，不然沒法生效。
        xiuxiu.setLaunchVars("cropPresets", cropPresets);
        /*第1個參數是加載編輯器div容器，第2個參數是編輯器類型，第3個參數是div容器寬，第4個參數是div容器高*/
        xiuxiu.embedSWF(xiuxiuFlashBox,editorType,"100%","100%");
        //設置上傳路徑
        xiuxiu.setUploadURL(uploadUrl);
        //設置上傳方式
        xiuxiu.setUploadType(uploadType);
        //設置html<input type="file" name="Filedata" id="file" />中的name
        xiuxiu.setUploadDataFieldName(uploadDataFieldName);
        //設置默認圖片
        xiuxiu.onInit = function(){
            xiuxiu.loadPhoto(defaultImgUrl);
        }
        //處理服務器響應
        xiuxiu.onUploadResponse = function(data){
            uploadResponseResult(data);
        }
    }
    
    //用戶設置美圖秀秀的參數
    
    //容器ID
    var xiuxiuFlashBox = "xiuxiuFlashBox";
    //要嵌入的編輯器類型（1爲輕量編輯，2爲輕量拼圖，3爲完整版，5爲頭像編輯器，默認值1）
    var editorType = 5;
    //裁剪的比例或尺寸
    var cropPresets = "1000:618";
    //上傳路徑
    var uploadUrl = "http://web.upload.meitu.com/image_upload.php";
    //上傳方式
    var uploadType = 2;
    //對應於設置html<input type="file" name="upload_file" id="file" />中的name
    var uploadDataFieldName = "upload_file";
    //默認圖片路徑
    var defaultImgUrl = "http://open.web.meitu.com/sources/images/1.jpg";
    //處理服務器的響應
    function uploadResponseResult(data){
        var json = $.parseJSON(data);
        var img = '<img src="'+json.original_pic+'" alt="alt圖片" />';
        //$(".xiuxiuUploadImg").css({"width":"auto","height":"auto"}).html(img);
        $("body").html(img);
    }
    
    //調用自定義美圖秀秀函數
    xiuxiuUploadImg(xiuxiuFlashBox,editorType,uploadUrl,uploadType,uploadDataFieldName,defaultImgUrl,cropPresets);
        
});

保存後的效果
css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。