403454318@qq.com
403454318@qq.com
  • 发布:2016-08-11 17:06
  • 更新:2018-03-26 10:16
  • 阅读:5084

mui制作的app怎么才能选择手机的文件

分类:HTML5+

目前使用mui做手机app的时候需要一个文件上传的功能,那么问题来了,怎么去得到手机里的文件?

2016-08-11 17:06 分享
已邀请:
赵梦欢

赵梦欢

目前用原生实现比较复杂,建议使用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 实现文件上传

海带

海带

<input type='file'>
为什么在ios 上有的可以选择文件有的不可以选择文件

要回复问题请先登录注册