美图秀秀上传图片案例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