β

html5 + js stackmod api 图片上传解析

 

官方版代码
<!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: 红色部分为修改优化代码
 
作者:有你做翅膀,孤单都是坚强
曾经的生涩,曾经的懵懂,曾经的自恋,都随风去吧。。。 生活中总要经历曲折,或许是我们不愿意,突然到最后走不通,想重新来过,记录每件小事
原文地址:html5 + js stackmod api 图片上传解析, 感谢原作者分享。

发表评论