目前用原生实现比较复杂,建议使用input file转成DataURL或者blob对象。
<input type="file" id="input" value="" />
<script type="text/javascript">
var fileInput = document.getElementById('input');
fileInput.addEventListener('change', function(event) {
var file = fileInput.files[0];
if (file) {
var reader = new FileReader();
reader.onload = function() {
//处理 android 4.1 兼容问题
var base64 = reader.result.split(',')[1];
var dataUrl = 'data:image/png;base64,' + base64;
console.log("dataUrl:"+dataUrl);
}
reader.readAsDataURL(file);
}
}, false);
</script>
上传文件可以参考一下这个介绍:
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Example_Uploading_a_user-selected_file
fileInput.addEventListener('change', function(event) {
var file = fileInput.files[0];
if (file) {
var reader = new FileReader();
var xhr = new plus.net.XMLHttpRequest();
xhr.onprogress=function(e){
var percentage = Math.round((e.loaded * 100) / e.total);
console.log("percentage:"+percentage);
}
xhr.onload=function(e){
console.log("percentage:100");
}
xhr.open("POST", "这里填写服务器地址");
reader.onload = function(evt) {
xhr.send(evt.target.result);
};
reader.readAsBinaryString(file);
}
});
使用 JavaScript File API 实现文件上传
2 个回复
赵梦欢 - 专注前端,乐于分享!
目前用原生实现比较复杂,建议使用input file转成DataURL或者blob对象。
上传文件可以参考一下这个介绍:
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Example_Uploading_a_user-selected_file
使用 JavaScript File API 实现文件上传
海带
<input type='file'>
为什么在ios 上有的可以选择文件有的不可以选择文件