首页 > 代码库 > HTML5上传图片
HTML5上传图片
一..前言
最近公司项目用到了input上传图片，使用ajax上传，不得不说这又是一个坑。里面主要用到了 fromdata属性。它的作用就是
通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据，以及需要给jquery发送
到后台的时候设置一下请求头，否则会出错。
二.html布局 这没什么可说的
<body>
<input type="file" name="oImg1" id="oImg1" value=http://www.mamicode.com/"" />
</body>
三. 重头戏在这里
<script type="text/javascript">
$(function(){
$("#oImg1").change(function(){var This = this;
uploadfile(This);
});
function uploadfile(This){ //上传照片
console.log(This)
var file = This.files[0];
//alert("文件大小:"+(file.size / 1024).toFixed(1)+"kB");
if (window.FileReader) {
var reader = new FileReader();
reader.readAsDataURL(file);
//监听文件读取结束后事件
reader.onloadend = function (e) {
console.log(e); //这里是上传文件后 返回的对象 你想要的信息都在这里
var formData = http://www.mamicode.com/new FormData(); //通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据
formData.append(‘file‘,file); //
$.ajax({
url :"/url" ,
type : ‘POST‘,
data : formData,
// 告诉jQuery不要去处理发送的数据
processData : false,
// 告诉jQuery不要去设置Content-Type请求头
contentType : false,
success : function(data) {
//请求成功
},
error : function(responseStr) {
console.log("error");
}
});
};
}
}
})
</script>
四.到这里就完成了图片上传的功能，希望对大家有所帮助
HTML5上传图片
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。