HTML 5 FILE API

最新推荐文章于 2023-06-05 08:00:00 发布

公众号：码农富哥

最新推荐文章于 2023-06-05 08:00:00 发布

阅读量820

点赞数

本文链接：https://blog.csdn.net/a519640026/article/details/17506779

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">

function selfile() {
   var pic = document.getElementsByTagName('input')[0].files[0];
   console.log(pic);
    var debug = document.getElementById('debug');
    var cont = '';
    cont += '文件名称:' + pic.name + '<br />';
    cont += '文件大小' + pic.size + '<br />';
    debug.innerHTML = cont;

    var tmpimg = document.createElement('img');
    tmpimg.src = window.URL.createObjectURL(pic); // 把二进制对象直接读成浏览器显示的资源
    document.getElementsByTagName('body')[0].appendChild(tmpimg);

}

</script>

<style type="text/css">
img {
width:500px;
}
</style>
</head>
    <body>
        <input type="file" name="pic" οnchange="selfile();" />
        <div id="debug">
        </div>
    </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">

function selfile() {
   // 创建FormData对象
   var fd = new FormData();

    // 获取文件对象
   var pic = document.getElementsByTagName('input')[0].files[0];

   // 把文件内容追加到表单数据里
   fd.append('pic',pic);


    var xhr = new XMLHttpRequest();
    xhr.open('POST','04-upfile.php',true);

    xhr.onreadystatechange = function () {
        if(this.readyState == 4) {
            document.getElementById('debug').innerHTML = this.responseText;
        }
    }
    
    xhr.send(fd);


}

</script>

<style type="text/css">
</style>
</head>
    <body>
        <input type="file" name="pic" οnchange="selfile();" />
        <div id="debug">
        </div>
    </body>
</html>

        $(function () {

            $('#iosPack').change(function (){

                $('#progress-div').css('display','')
                $('#progress-bar').css('width','0%')
                $('#iosErrorMsg').html('')

                var formData = new FormData();
//                var file = document.getElementById('iosPack').files[0]  效果同下

                var file = $('#iosPack')[0].files[0]

                formData.append('file',file);

                var xhr = new XMLHttpRequest();
                xhr.open('POST','{{ path('acme_admin_app_dealAppUpload') }}',true);

                xhr.upload.onprogress = function (ev) {
                    if(ev.lengthComputable) {

                        var percent = 100 * ev.loaded/ev.total;

                        $('#progress-bar').css('width',percent+'%')

                    }
                }

                xhr.upload.onload = function (){
                    $('#progress-bar').css('width','100%')
                }

                xhr.onreadystatechange = function () {
                    if(this.readyState == 4) {
                        var data = xhr.responseText
                        data = $.parseJSON(data)
                        if(data.error ==0){
                            $('#iosDownLink').val(data.plistDownLink)
                        }else{
                            $('#iosErrorMsg').html(data.errormsg)
                            $('#iosErrorMsg').css('color','red')
                        }
                    }
                }

                xhr.send(formData);

            })

公众号：码农富哥

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML 5 FILE API

新建网页function selfile() { var pic = document.getElementsByTagName('input')[0].files[0]; console.log(pic); var debug = document.getElementById('debug'); var cont = ''; cont += '文
复制链接

扫一扫