javascript点击按钮上传图片
简介:
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()});
}
上一篇: laravel 项目从github仓库拉取加载类库
下一篇: GD处理图片