html5 file 上传文件

<body>

        <header>

            <h2>Pure HTML5 file upload</h2>

        </header>

        <div class="container">

            <div class="contr"><h2>You can select the file (image) and click Upload button</h2></div>

            <div class="upload_form_cont">

                <form id="upload_form" enctype="multipart/form-data" method="post" action="upload.php">

                    <div>

                        <div><label for="image_file">Please select image file</label></div>

                        <div><input type="file" name="image_file" id="image_file" onchange="fileSelected();" /></div>

                    </div>

                    <div>

                        <input type="button" value="Upload" onclick="startUploading()" />

                    </div>

                    <div id="fileinfo">

                        <div id="filename"></div>

                        <div id="filesize"></div>

                        <div id="filetype"></div>

                        <div id="filedim"></div>

                    </div>

                    <div id="error">You should select valid image files only!</div>

                    <div id="error2">An error occurred while uploading the file</div>

                    <div id="abort">The upload has been canceled by the user or the browser dropped the connection</div>

                    <div id="warnsize">Your file is very big. We can't accept it. Please select more small file</div>

                    <div id="progress_info">

                        <div id="progress"></div>

                        <div id="progress_percent">&nbsp;</div>

                        <div class="clear_both"></div>

                        <div>

                            <div id="speed">&nbsp;</div>

                            <div id="remaining">&nbsp;</div>

                            <div id="b_transfered">&nbsp;</div>

                            <div class="clear_both"></div>

                        </div>

                        <div id="upload_response"></div>

                    </div>

                </form>

                <img id="preview" />

            </div>

        </div>

    </body>

.upload_form_cont {

    background: -moz-linear-gradient(#ffffff, #f2f2f2);

    background: -ms-linear-gradient(#ffffff, #f2f2f2);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));

    background: -webkit-linear-gradient(#ffffff, #f2f2f2);

    background: -o-linear-gradient(#ffffff, #f2f2f2);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2');

    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2')";

    background: linear-gradient(#ffffff, #f2f2f2);

    color:#000;

    overflow:hidden;

}

#upload_form {

    float:left;

    padding:20px;

    width:700px;

}

#preview {

    background-color:#fff;

    display:block;

    float:right;

    width:200px;

}

#upload_form > div {

    margin-bottom:10px;

}

#speed,#remaining {

    float:left;

    width:100px;

}

#b_transfered {

    float:right;

    text-align:right;

}

.clear_both {

    clear:both;

}

input {

    border-radius:10px;

    -moz-border-radius:10px;

    -ms-border-radius:10px;

    -o-border-radius:10px;

    -webkit-border-radius:10px;

    border:1px solid #ccc;

    font-size:14pt;

    padding:5px 10px;

}

input[type=button] {

    background: -moz-linear-gradient(#ffffff, #dfdfdf);

    background: -ms-linear-gradient(#ffffff, #dfdfdf);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #dfdfdf));

    background: -webkit-linear-gradient(#ffffff, #dfdfdf);

    background: -o-linear-gradient(#ffffff, #dfdfdf);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf');

    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf')";

    background: linear-gradient(#ffffff, #dfdfdf);

}

#image_file {

    width:400px;

}

#progress_info {

    font-size:10pt;

}

#fileinfo,#error,#error2,#abort,#warnsize {

    color:#aaa;

    display:none;

    font-size:10pt;

    font-style:italic;

    margin-top:10px;

}

#progress {

    border:1px solid #ccc;

    display:none;

    float:left;

    height:14px;

    border-radius:10px;

    -moz-border-radius:10px;

    -ms-border-radius:10px;

    -o-border-radius:10px;

    -webkit-border-radius:10px;

    background: -moz-linear-gradient(#66cc00, #4b9500);

    background: -ms-linear-gradient(#66cc00, #4b9500);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66cc00), color-stop(100%, #4b9500));

    background: -webkit-linear-gradient(#66cc00, #4b9500);

    background: -o-linear-gradient(#66cc00, #4b9500);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66cc00', endColorstr='#4b9500');

    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#66cc00', endColorstr='#4b9500')";

    background: linear-gradient(#66cc00, #4b9500);

}

#progress_percent {

    float:right;

}

#upload_response {

    margin-top: 10px;

    padding: 20px;

    overflow: hidden;

    display: none;

    border: 1px solid #ccc;

    border-radius:10px;

    -moz-border-radius:10px;

    -ms-border-radius:10px;

    -o-border-radius:10px;

    -webkit-border-radius:10px;

    box-shadow: 0 0 5px #ccc;

    background: -moz-linear-gradient(#bbb, #eee);

    background: -ms-linear-gradient(#bbb, #eee);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bbb), color-stop(100%, #eee));

    background: -webkit-linear-gradient(#bbb, #eee);

    background: -o-linear-gradient(#bbb, #eee);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#eee');

    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#eee')";

    background: linear-gradient(#bbb, #eee);

}

// common variables

var iBytesUploaded = 0;

var iBytesTotal = 0;

var iPreviousBytesLoaded = 0;

var iMaxFilesize = 1048576; // 1MB

var oTimer = 0;

var sResultFileSize = '';

function secondsToTime(secs) { // we will use this function to convert seconds in normal time format

    var hr = Math.floor(secs / 3600);

    var min = Math.floor((secs - (hr * 3600))/60);

    var sec = Math.floor(secs - (hr * 3600) -  (min * 60));

    if (hr < 10) {hr = "0" + hr; }

    if (min < 10) {min = "0" + min;}

    if (sec < 10) {sec = "0" + sec;}

    if (hr) {hr = "00";}

    return hr + ':' + min + ':' + sec;

};

function bytesToSize(bytes) {

    var sizes = ['Bytes', 'KB', 'MB'];

    if (bytes == 0) return 'n/a';

    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));

    return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];

};

function fileSelected() {

    // hide different warnings

    document.getElementById('upload_response').style.display = 'none';

    document.getElementById('error').style.display = 'none';

    document.getElementById('error2').style.display = 'none';

    document.getElementById('abort').style.display = 'none';

    document.getElementById('warnsize').style.display = 'none';

    // get selected file element

    var oFile = document.getElementById('image_file').files[0];

    // filter for image files

    var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;

    if (! rFilter.test(oFile.type)) {

        document.getElementById('error').style.display = 'block';

        return;

    }

    // little test for filesize

    if (oFile.size > iMaxFilesize) {

        document.getElementById('warnsize').style.display = 'block';

        return;

    }

    // get preview element

    var oImage = document.getElementById('preview');

    // prepare HTML5 FileReader

    var oReader = new FileReader();

        oReader.onload = function(e){

        // e.target.result contains the DataURL which we will use as a source of the image

        oImage.src = e.target.result;

        oImage.onload = function () { // binding onload event

            // we are going to display some custom image information here

            sResultFileSize = bytesToSize(oFile.size);

            document.getElementById('fileinfo').style.display = 'block';

            document.getElementById('filename').innerHTML = 'Name: ' + oFile.name;

            document.getElementById('filesize').innerHTML = 'Size: ' + sResultFileSize;

            document.getElementById('filetype').innerHTML = 'Type: ' + oFile.type;

            document.getElementById('filedim').innerHTML = 'Dimension: ' + oImage.naturalWidth + ' x ' + oImage.naturalHeight;

        };

    };

    // read selected file as DataURL

    oReader.readAsDataURL(oFile);

}

function startUploading() {

    // cleanup all temp states

    iPreviousBytesLoaded = 0;

    document.getElementById('upload_response').style.display = 'none';

    document.getElementById('error').style.display = 'none';

    document.getElementById('error2').style.display = 'none';

    document.getElementById('abort').style.display = 'none';

    document.getElementById('warnsize').style.display = 'none';

    document.getElementById('progress_percent').innerHTML = '';

    var oProgress = document.getElementById('progress');

    oProgress.style.display = 'block';

    oProgress.style.width = '0px';

    // get form data for POSTing

    //var vFD = document.getElementById('upload_form').getFormData(); // for FF3

    var vFD = new FormData(document.getElementById('upload_form')); 

    // create XMLHttpRequest object, adding few event listeners, and POSTing our data

    var oXHR = new XMLHttpRequest();

    oXHR.upload.addEventListener('progress', uploadProgress, false);

    oXHR.addEventListener('load', uploadFinish, false);

    oXHR.addEventListener('error', uploadError, false);

    oXHR.addEventListener('abort', uploadAbort, false);

    oXHR.open('POST', 'upload.php');

    oXHR.send(vFD);

    // set inner timer

    oTimer = setInterval(doInnerUpdates, 300);

}

function doInnerUpdates() { // we will use this function to display upload speed

    var iCB = iBytesUploaded;

    var iDiff = iCB - iPreviousBytesLoaded;

    // if nothing new loaded - exit

    if (iDiff == 0)

        return;

    iPreviousBytesLoaded = iCB;

    iDiff = iDiff * 2;

    var iBytesRem = iBytesTotal - iPreviousBytesLoaded;

    var secondsRemaining = iBytesRem / iDiff;

    // update speed info

    var iSpeed = iDiff.toString() + 'B/s';

    if (iDiff > 1024 * 1024) {

        iSpeed = (Math.round(iDiff * 100/(1024*1024))/100).toString() + 'MB/s';

    } else if (iDiff > 1024) {

        iSpeed =  (Math.round(iDiff * 100/1024)/100).toString() + 'KB/s';

    }

    document.getElementById('speed').innerHTML = iSpeed;

    document.getElementById('remaining').innerHTML = '| ' + secondsToTime(secondsRemaining);

}

function uploadProgress(e) { // upload process in progress

    if (e.lengthComputable) {

        iBytesUploaded = e.loaded;

        iBytesTotal = e.total;

        var iPercentComplete = Math.round(e.loaded * 100 / e.total);

        var iBytesTransfered = bytesToSize(iBytesUploaded);

        document.getElementById('progress_percent').innerHTML = iPercentComplete.toString() + '%';

        document.getElementById('progress').style.width = (iPercentComplete * 4).toString() + 'px';

        document.getElementById('b_transfered').innerHTML = iBytesTransfered;

        if (iPercentComplete == 100) {

            var oUploadResponse = document.getElementById('upload_response');

            oUploadResponse.innerHTML = '<h1>Please wait...processing</h1>';

            oUploadResponse.style.display = 'block';

        }

    } else {

        document.getElementById('progress').innerHTML = 'unable to compute';

    }

}

function uploadFinish(e) { // upload successfully finished

    var oUploadResponse = document.getElementById('upload_response');

    oUploadResponse.innerHTML = e.target.responseText;

    oUploadResponse.style.display = 'block';

    document.getElementById('progress_percent').innerHTML = '100%';

    document.getElementById('progress').style.width = '400px';

    document.getElementById('filesize').innerHTML = sResultFileSize;

    document.getElementById('remaining').innerHTML = '| 00:00:00';

    clearInterval(oTimer);

}

function uploadError(e) { // upload error

    document.getElementById('error2').style.display = 'block';

    clearInterval(oTimer);

}  

function uploadAbort(e) { // upload abort

    document.getElementById('abort').style.display = 'block';

    clearInterval(oTimer);

}

https://codepen.io/zhishaofei3/pen/rKVLjE

html5 file 上传文件的更多相关文章

input type=file 上传文件样式美化（转载）
input type=file 上传文件样式美化来源:https://www.jianshu.com/p/6390595e5a36 在做input文本上传时,由于html原生的上传按钮比较丑,需要对 ...
python 之前端开发（form标签、单选框、多选框、file上传文件、按钮、label标签、下拉列表、textarea标签、fieldset标签、table标签）
11.25 form标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
在HTML5的 input:file 上传文件类型控制遇到的问题
1.input:file 属性的介绍先瞅代码吧 <form> <input type="file" name="pic" accept=& ...
C# 结合html5 批量上传文件和图片预览
html5 新特性 <input id="imgsf" type="file" name="imgsf" multiple /> ...
php 使用html5 XHR2 上传文件进度显示
思路:只要我们知道上传文件的总大小,还有上传过程中上传文件的大小,那么就可以实现进度显示了. 在html5中,XMLHttpRequest对象,传送数据的时候,progress事件用来返回进度信息. ...
实践Html5的上传文件
技术点: 1.通过input的change事件获取文件信息: onchange = function() { this.files } 这个files属性是htmlInputElement接口的属性, ...
input file 上传文件
面试的时候遇到一个问题,要求手写的方式上传文件. 本来觉得很简单,但是结果怎么也成功不了. 前台: <form ID="form1" action="AcceptF ...
ajax+ashx 完美实现input file上传文件
1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图: Firefox效 ...
HTML5 读取上传文件（转载）
另参考 http://www.jianshu.com/p/46e6e03a0d53 1 filelist对象与file对象: <input type="file" id=&q ...

随机推荐

linux 配置本地光盘YUM源
1.挂载光盘到 /media下 [root@localhost ~]# mount /dev/cdrom /media 2.直接配置文件了. [root@localhost ~]# cd /etc/y ...
maven构建myeclipse 工程
前提:安装maven完成后 mvn -version查看版本一,新建WEB 工程 mvn archetype:generate -DgroupId={project-packaging} -Dar ...
Idea中的一些快捷键
最常用快捷键 sout 输出语句 psvm 输出main方法 fori 输出for语句 iter 输出foreach语句 Ctrl+Shift+U 大小写转换 Ctrl+Shift+Enter 补全一 ...
Part-Three 类与对象
1.时钟类的完整程序 #include<iostream> using namespace std; class Clock{ public : ,,);//设置函数的默认值,注意!在此处 ...
解析ArcGis的字段计算器（三）——文本型字段计算，编号那些事儿
实际操作中我们一般会将编号字段定义为文本型,因为编号不是序号,序号是一个递增数值,而编号往往是一个数字串代码. 本篇无说明的均使用VBScript语句1.怎么编号?最简单的编号—>直接在编号字段 ...
in和hasOwnProperty的区别
两者都代表查看某个属性是不是对象自己的,返回布尔值 in判断的是对象的所有属性,包括对象实例及其原型的属性 hasOwnProperty则是判断对象实例的是否具有某个属性
解决浏览器跨域限制方案之WebSocket
WebSocket是在HTML5中引入的浏览器与服务端的通信协议,可以类比HTTP. 可以在支持HTML5的浏览器版本中使用WebSocket进行数据通信,常见的案例是使用WebSocket进行实时数 ...
关于Unicode
http://www.unicode.org/faq/utf_bom.html 有关UTF或编码表单的一般问题 Unicode是16位编码吗? Unicode文本可以以多种方式表示吗? 什么是UTF? ...
什么是CRUD
CRUD是指在做计算处理时的增加(Create).读取查询(Retrieve).更新(Update)和删除(Delete)几个单词的首字母简写.主要被用在描述软件系统中数据库或者持久层的基本操作功能.
UVAlive 6697 Homework Evaluation
借鉴了别人的博客啊,自己写写给以后的自己看吧给出两个字符串,用第二个字符串去匹配第一个字符串,可以对第二个字符串进行删除或插入操作,一位匹配成功得8分失败-5分,如果插入或删除,对于连续插入或删除m ...

html5 file 上传文件

html5 file 上传文件的更多相关文章

随机推荐

热门专题