天天看點

阿裡雲 oss html js圖檔上傳

html代碼:

<img id="imgpd1" style="width: 2.8rem; height: 2.8rem;" "selectImagepd(this)" src="" />
 <input id="imageFilepd1" name="imgUpload" type="file" />
           

js代碼:

<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
<script>
let client = new OSS.Wrapper({
    region: 'oss-cn-beijing',
    accessKeyId: '**accessKeyId**',
    accessKeySecret: '**accessKeySecret**',
    bucket: '**bucket**'
  });

function selectImagepd(myself){
	var updateButtonId = myself.id; //  擷取 修改按鈕 的id 然後 擷取他的數字   	
	var num = (myself.id).replace(/[^0-9]/ig,""); // 用來提取id字元串中的數字	
	$('#imageFilepd'+num).click();   //  觸發 file 的 單擊事件
	$('#imageFilepd'+num).change(function (){
		console.info("updateIMage");
		var file = 	document.getElementById('imageFilepd'+num);
		  var img = document.getElementById('imgpd'+num);
	      if (file.files && file.files[0])
	      {
	          var reader = new FileReader();
	          reader.onload = function(evt){
	        	  img.src = evt.target.result;
	        	  $('#atest').attr("href",evt.target.result);
	        	//  $("#sevenSee").attr("src",evt.target.result);
	          }
	          reader.readAsDataURL(file.files[0]);
	      }
	      else //相容IE
	      {
	        file.select();
	        var src = document.selection.createRange().text;
	        img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
	      }
	     // console.info(img);
			console.log("change");
	      	client.multipartUpload("/**paycode/123_1.png**", this.files[0]).then(function (result) {
	            console.log(result);
	          }).catch(function (err) {
	            console.log(err);
	          });
		
	});
}
 </script>
           

https://blog.csdn.net/shidewen1125/article/details/53442820