沐风网(http://www.mfcad.com)是国内最大的机械设计软件垂直交流社区。为了适应业务发展需要，将图片存储业务放在了oss上。
OSS解决的业务问题: 上传网站的图片至OSS 解决应用服务的压力。
使用OSS的方式： 结合SWFUpload插件以及OSS存储图片功能上传图片到OSS指定的Bucket下面，可以创建文件形式的object用来存储当天上传的图片。利用OSS图片缩略功能可以及时看到上传的图片缩略。
插件简介
本插件主要 为图片上传网站提供基于阿里云OSS 远程图片存储功能。 并且支持多张上传并能及时查看图片上传的缩略图。
插件特色:
1.支持阿里云 OSS 的图片服务
2.支持阿里云 OSS 的图片缩略功能并能及时查看已上传的图片
3.支持全部图片格式（.jpg;*.jpeg;*.gif;*.png;）
4.可以在oss 上创建日期形式的索引目录用来规划已上传的图片
5. 降低主应用服务的压力
详细流程：
1. 配置正确的OSS OSS_ACCESS_ID 和 OSS_ACCESS_KEY
2. 点击上传按钮上传文件
3. 通过swfupload插件会把图片的参数发送到 upload.php
file_types_description:"All Files",
file_upload_limit:"50",
custom_settings : {progressTarget : "fsUploadProgress",cancelButtonId : "btnCancel"},
button_image_url: "",
button_width: 75,
button_height: 28,
button_placeholder_id: "buttonPlaceHolder",
button_text_style: "",
button_text_top_padding: 3,
button_text_left_padding: 12,
button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
button_cursor: SWFUpload.CURSOR.HAND,
file_dialog_start_handler : fileDialogStart,
file_queued_handler : fileQueued,
file_queue_error_handler:fileQueueError,
file_dialog_complete_handler:fileDialogComplete,
upload_progress_handler:uploadProgress,
upload_error_handler:uploadError,
upload_success_handler:uploadSuccess,
upload_complete_handler:uploadComplete,
debug:true
});
$("#fsUploadProgress").sortable();
});
4. Upload.php接受swfupload 接受发过来的信息 此文件主要负责（接受图片参数，上传图片，创建图片所在的文件夹，生成图片缩略图，以及返回图片信息）详细介绍如下：
<?php
if(isset($_FILES["s3_file"]) && is_uploaded_file($_FILES["s3_file"]["tmp_name"]) && $_FILES["s3_file"]["error"] == 0) {
require_once 'conf.inc.php';
require_once 'lib/sdk.class.php';
$oss_sdk_service = new ALIOSS();
$bucket = OSS_BUCKET;
$file_name = $_FILES["s3_file"]["name"];
$file_oldname=$_FILES["s3_file"]["name"];
$ext = strrchr($file_name,'.');
$file_oldname=str_replace($ext,'',$file_oldname);
$object = $file_name;
$content = '';
$length = 0;
$fp = fopen($_FILES["s3_file"]["tmp_name"],'r');
$ext = strrchr($object,'.');
if($fp)
{
$f = fstat($fp);
$length = $f['size'];
while(!feof($fp))
{
$content .= fgets($fp);
}
}
$upload_file_options = array('content' => $content, 'length' => $length);
//判断这个目录是否存在
$dir = date("Y").'/'.date('m').'/'.date('d').'/';
$resultz=$oss_sdk_service->is_object_exist(OSS_BUCKET,$dir);
$statusza=$resultz->status;
if($statusza==404){
create_directory($oss_sdk_service,$dir);//创建目录
}
$file_name=time().rand(100,999);
$combin=$file_name.$ext;
$dirfile=$dir.$combin; //加上路径在文件名字上 目的是放入目录中
//文件名字重复不覆盖措施
$statuszt=$oss_sdk_service->is_object_exist(OSS_BUCKET,$dirfile);
$filenew=$statuszt->status;
if($filenew==200){
while ($filenew==200) {
$file_name.= rand(10, 99);
}
$combin=$file_name.$ext;
$dirfile=$dir.$combin; //加上路径在文件名字上 目的是放入目录中
}
$upload_file_by_content = $oss_sdk_service->upload_file_by_content($bucket,$dirfile, $upload_file_options);
$thumburl=litimg($dirfile,100,100);
// //大图路径
// $bigimgurl="http://images.mfcad.com/".$dirfile;
$rejson = array (
"error" => array("no"),
"imageid" => array($file_name), //为了有不一样的imageid
"size" => array("63701"),
"name"=>array($combin),
"path"=>array($dirfile),
"width"=>array(675),
"height"=>array(297),
"thumburl"=>array($thumburl),
"file_oldname"=>array($file_oldname)
);
echo json_encode($rejson);
// echo (URL_MODE==0) ? "http://".$bucket.OSS_DLINK.$file_name : DOWN_URL.$file_name;
}
require_once 'conf.inc.php';
require_once 'lib/sdk.class.php';
$oss_sdk_service = new ALIOSS();
function create_directory($obj,$dir){
$bucket = 'democeshi';
//$dir = '"><img src=\"#\" onerror=alert(\/';
$dirz=substr($dir,0,-1);
$response = $obj->create_object_dir($bucket,$dirz);
}
//缩略图
function litimg($filename,$width=100,$height=100){
$org="http://images.mfcad.com/";
$file=$filename;
$thumburl=$org.$file.'@'.$height.'h_'.$width.'w_0e';
return $thumburl;
}
?>
5. Handlers.js 接受 Upload.php 图片上传成功后返回的 JSON 数据，将其数据解析并动态的追加到 上传图片的 html 文件中
代码如下：
function att_show(serverData,file)
{
var data=$.parseJSON(serverData);
if(data.error != 'no') {
alert(data.error);
return false;
}
if($.inArray(file.type, Array('.jpg','.gif','.jpeg','.bmp','.png'))!=-1){
var imageDesc = file.name.toLowerCase().replace(file.type,"");
var imageHost = 'http://images.mfcad.com/';
var imageFile = data.path + data.name;
var id=134;
var desc="";
// var str = '<div class="fileContainer" id="fileContainer_'+file.index+'"><div class="fileUpDown"><a href="javascript:void(0)" class="upT"></a></div><div class="fileInfo"><img src="'+ imageHost + imageFile +'" width="100" height="75" /><input type="hidden" name="imagefile_'+file.index+'" id="imagefile_'+file.index+'" value="'+imageFile+'"></div><div class="fileDesc"><textarea name="fileDesc_'+file.index+'" id="fileDesc_'+file.index+'">'+imageDesc+'</textarea></div><div class="fileClose"><a class="fileCancel" href="javascript:void(0)" onclick="removeImg('+file.index+');"> </a></div></div>';
// 拼合新的
var str = "";
str+=" <div class=\"circleGray pt10\" id=\"mainimage_" + data.imageid +"\">";
str+=" <div class=\"circleGrayCenter layout\">";
str+=" <table class=\"upTBoxTable\" cellspacing=\"0\" cellpadding=\"0\">";
str+=" <tr class=\"result_tr\">";
str+="<td><a href=\"javascript:void(0)\" class=\"upT\"><\/a><\/td>";
str+="<td><table cellspacing=\"0\" cellpadding=\"0\"><tr><td colspan=\"2\">图片名称：<input class=\"text\"style=\"width:290px; color:#aaaaaa\" type=\"text\" class=\"input-focus\" name=\"imagename_"+data.imageid+"\" id=\"imagename_"+data.imageid+"\" onclick=\"cancelImageValue(this);\" value=\""+data.file_oldname+"\" maxlength=\"30\" size=\"30\"><\/td><\/tr><tr><td><a href=\"http://images.mfcad.com/"+data.path+"\" target=\"_blank\" title=\"点击查看大图\"><img src=\""+data.thumburl+"\" \/><\/td><td><textarea id=\"imagedesc_"+data.imageid+"\" name=\"imagedesc_"+data.imageid+"\" onclick=\"cancelImageDesc(this);\" class=\"textarea\">可以不填写，详细的叙述图纸的内容可以获得更高的初始收益和提高下载量<\/textarea><\/td><\/tr><\/table><\/td>";
str+="<td width=\"50\"><a href=\"javascript:void(0)\" onclick=\"removeImg(this,'"+ id +"');\" class=\"close\"><\/a><\/td>";
str+='<input type="hidden" name="imageserver_'+ data.imageid +'" value="1" />';
str+='<input type="hidden" name="imagepath_'+ data.imageid +'" value="'+ data.path +'" />';
str+='<input type="hidden" name="imagefilename_'+ data.imageid +'" value="'+ data.name +'" />';
str+='<input type="hidden" name="imageid[]" value="'+ data.imageid +'" />';
str+=" <\/tr>";
str+=" <\/table>";
str+=" <\/div>";
str+=" <\/div>";
}else if($.inArray(file.type, Array('.zip','.rar'))!=-1){
var attachHost = 'http://www.mfcad.com/up/';
var attachFile = data.path + data.name;
var str = '<div class="progressContainer" id="attachContainer_'+file.index+'"><div class="progressName"><img src="http://images.mfcad.com/2015/04/01/1427850554158.jpg" width="16" height="16">'+file.name+'<input type="hidden" name="attachfile_'+file.index+'" id="attachfile_'+file.index+'" value="'+attachFile+'"></div><div class="progressBarStatus">文件上传成功</div><div class="progressClose"><a class="progressCancel" href="javascript:void(0)" onclick="removeAttach('+file.index+');"> </a></div></div>';
}
$('#'+file.id).after(str);
$("#fineuploader" ).sortable();
}
OSS上的图片存储方式
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
