注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

有你做翅膀,孤单都是坚强

生命中总要经历曲折,或许是我们不愿意,突然到最后走不通,想重新来过,记录每件小事

 
 
 

日志

 
 
关于我
K24

曾经的生涩,曾经的懵懂,曾经的自恋,都随风去吧。。。

网易考拉推荐
 
 

html5 + js stackmod api 图片上传解析  

2013-02-28 09:55:05|  分类: @html5 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

官方版代码

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://static.stackmob.com/js/stackmob-js-0.8.0-bundled-min.js"></script>
 
<script type="text/javascript">
/* <![CDATA[ */
    StackMob.init({
        appName: 'your_app_name',
        clientSubdomain: 'your_client_subdomain',
        publicKey: 'your_public_key',
    apiVersion: 0
  });
/* ]]> */
</script>
 
</head>
<body>
 
<table>
  <tr>
    <td>File to Encode:</td>
    <td><input type="file" id="files" name="files[]" multiple /></td>
  </tr>
</table>
 
<script type="text/javascript">
  //Define your Todo class once on the page.
  var Todo = StackMob.Model.extend({
    schemaName: 'todo'
  });
 
  var todoInstance = new Todo();
  var fieldname = 'picture'; //name of binary field that you created in your schema
  
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
 
    // Loop through the FileList
    for (var i = 0, f; f = files[i]; i++) {
 
      var reader = new FileReader();
 
      // Closure to capture the file information
      reader.onload = (function(theFile) {
        return function(e) {
 
          /*
            e.target.result will return "data:image/jpeg;base64,[base64 encoded data]...".
            We only want the "[base64 encoded data] portion, so strip out the first part
          */
          var base64Content = e.target.result.substring(e.target.result.indexOf(',') + 1, e.target.result.length);
          var fileName = theFile.name;
          var fileType = theFile.type;
 
          todoInstance.setBinaryFile(fieldname, fileName, fileType, base64Content);
          todoInstance.save();
 
        };
      })(f);
 
      // Read in the file as a data URL
      fileContent = reader.readAsDataURL(f);
 
    }
  }
 
  document.getElementById('files').addEventListener('change', handleFileSelect, false);
 
</script>
 
</body>
</html>


我的代码


var Todo = StackMob.Model.extend({
schemaName: 'scene_picture'
});


var fieldname = 'picture'; //name of binary field that you created in your schema

function handleFileSelect(evt) {
console.debug("handle file select done ..");
/* for(var o in evt){
console.debug(o + "-------当前evt有哪些属性---------" + evt[o] );

}*/
var todoInstance = new Todo();

/*

*把 todoInstance 修改成局部变量, 每次执行这个函数, todoInstance 都会被创建一次, 这样避免了多次上传时

*后上传的会把先上传的覆盖掉的问题

*/
var files = evt.files; // FileList object
var eleName = new String(evt.id);
console.debug("被选用的控件是--------" + eleName);
var selectedId = new String(eleName.substring(5,eleName.length));
console.debug("被选用的控件序号是------" + selectedId);
// Loop through the FileList
for (var i = 0, f; f = files[i]; i++) {

var reader = new FileReader();

// Closure to capture the file information
reader.onload = (function(theFile) {
return function(e) {

/*
e.target.result will return "data:image/jpeg;base64,[base64 encoded data]...".
We only want the "[base64 encoded data] portion, so strip out the first part
*/
var base64Content = e.target.result.substring(e.target.result.indexOf(',') + 1, e.target.result.length);

for(var o in theFile){

console.debug("stackmob , 图片有哪些属性----------------------" + o);
}

var fileName = theFile.name;
var fileType = theFile.type;
console.debug("上传图片的文件类型是-------" + fileType);

if (fileType != "image/jpg" && fileType != "image/gif" && fileType != "image/bmp" && fileType != "image/png" && fileType !="image/jpeg")
{
alert("允许图片后缀是jpg, gif, bmp, png !!!");
return;
} /*

*增加图片后缀验证

*/
console.debug("-------上传文件类型合法");
//loadBar(1);

var mouseX_Y = GetObjPos("file_" + selectedId);
testMessageBox(mouseX_Y);
todoInstance.setBinaryFile(fieldname, fileName, fileType, base64Content);
todoInstance.save(null,{
success: function(model) {
console.debug("save success-----------" + model.toJSON());
var obj = model.toJSON();
console.debug("picture url-----" + obj.picture);

/*

*增加上传成功失败异步函数

*注意 save 后第一个参数是 null, null 为备用

*/
console.debug("src 前---" + document.getElementById("img_" + selectedId).src);

document.getElementById("img_" + selectedId).src = new String(obj.picture);

document.getElementById("x_" + selectedId).innerHTML = "x:0";
document.getElementById("y_" + selectedId).innerHTML = "y:0";
$("#d1_" + selectedId).css({width: "100px",height:"20px",background:"none repeat scroll 0% 0% gold",textAlign:"center",position:"absolute",left:"0px",top:"0px",cursor:"default"});

/*
background:"none repeat scroll 0% 0% gold",text-align:"center",position:"absolute",left:"0px",top:"0px",cursor:"default"
*/
/*
document.getElementById("dragBox_" + selectedId).innerHTML = "";

document.getElementById("dragBox_" + selectedId).innerHTML='<img id="img_'+selectedId+'" style="background-color: #99CCFF" src="'+String(obj.picture)+'" name="scene_url"><div id="d1_'+selectedId+'" style="width: 100px; height: 20px; background: none repeat scroll 0% 0% gold; text-align: center; position: absolute; left:0px; top:0px; cursor: default;">Drag me.</div>';
*/


console.debug("src 后---" + document.getElementById("img_" + selectedId).src);
document.getElementById("img_" + selectedId).addEventListener("load",third_imgLoadedHandler); //图片上传成功之后, 去监听加载进度函数
document.getElementById("img_" + selectedId).addEventListener("error",imgLoadErrorHandler);
document.getElementById("img_" + selectedId).addEventListener("abort",imgLoadAbortHandler);

// divDragHandler("dragBox_"+selectedId,"d1_"+selectedId,"x_"+selectedId,"y_"+selectedId,"img_"+selectedId);

/*for(var o in obj){

console.debug("o-----------" + o);
console.debug("obj-------" + obj[o]);

}
*/

},
error: function(model, response) {
//loadBar(1);
//testMessageBox();
close_command = "close";
closeWindow();
console.debug("save faild----" + collection.toJSON());

},
});

};
})(f);

// Read in the file as a data URL
fileContent = reader.readAsDataURL(f);

}
}


document.getElementById('p_img_file').addEventListener('change', handleImageSelect, false);



ps: 红色部分为修改优化代码
  评论这张
 
阅读(33)| 评论(0)
推荐

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017