滚动条的自定义化,往往在做移动web的时候,能为我们的项目增添不少风采,而且通过为其添加-webkit-overflow-scrolling : touch; 的css属性,使其有着如同ios系统浏览器中bounce的效果,这里的话,提供一个仿ios风格自定义滚动条的demo,代码如下:
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="UTF-8" />
- <title>Document</title>
- <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
- </head>
- <body>
- <div>
- 上传文件 : <input type="file" name="file" multiple id="fileId" />
- <button type="submit" name="btn" value="提交" id="btnId" οnclick="check()">提交</button>
- </div>
- <script type="text/javascript">
- function check() {
- var objFile = document.getElementById("fileId");
- if(objFile.value == "") {
- alert("不能空")
- }
- var files = $('#fileId').prop('files'); //获取到文件列表
- console.log(files.length);
- if(files.length == 0) {
- alert('请选择文件');
- } else {
- for(var i = 0; f = files[i]; i++) {
- var reader = new FileReader(); //新建一个FileReader
- reader.readAsText(files[i], "UTF-8"); //读取文件
- reader.onload = function(evt) { //读取完文件之后会回来这里
- var fileString = evt.target.result; // 读取文件内容
- console.log(fileString)
- }
- }
- }
- }
- </script>
- </body>
- </html>