javascript点击按钮上传图片

风之舞 2023-10-31 17:39:01 134
php 
简介: javascript点击按钮上传图片
交表单文件转换为dataUrl点击download
<input type="file" name="myfile" id="myfile"/>
<button id="down" onclick="download()">下载</button>
<script type="text/javascript">
    function download() {
      var obj = document.getElementById("myfile").files[0];
      var atag = document.createElement("a")
      var fr = new FileReader();
      fr.readAsDataURL(obj)
      fr.onload = function (e) {
         atag.href = e.target.result
         atag.target="_blank"
         document.body.appendChild(atag)
         atag.click()
      }
    }
</script>

点击按钮js上传图片
$("#create_photo").on('click',function(){
   var inputValue = $("#fen_img").val();
   if (inputValue.trim() === '') {
      return;
   }
   icon_base_url = icon_base_url+"?op=get_img_html&words="+inputValue;//生成图片
   var xhr = new XMLHttpRequest();
   xhr.open("GET",icon_base_url,true);
   xhr.responseType='blob';xhr.send();
   xhr.onload = function(){
      var b_res = this.response;
      if(b_res.size < 100){
         var reder = new FileReader();
         reder.readAsText(b_res,'utf-8');
         reder.onload = function(){
            var jstr = JSON.parse(this.result);
            layer.msg(jstr.msg);
         }
         return '';
      }
      var img_data = new FormData();img_data.append('file',blobToFile(b_res));
      $.ajax({
         url: 'other.php?op=img_upload',
         type: 'POST',
         data: img_data,
         dataType:'json',
         processData: false,
         contentType:false,
         success: function(data) {
            //成功后的操作
            $("#data__icon").val(data.data.src);
            $('#icon_img').attr('src',data.data.src);
         },
         error: function(xhr, status, error) {
            layer.msg('生成失败');
         }
      });
   }
});
function blobToFile(theBlob,fileName){
   fileName = Math.floor(Math.random() * 10),fileName = fileName.toString()+".png",theBlob.lastModifiedDate = new Date();theBlob.name = fileName;
   return new File([theBlob],fileName,{type:theBlob.type,lastModified:Date.now()});
}