zoukankan      html  css  js  c++  java
  • h5图片上传预览与拖拽上传

    图片上传:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <script src="jquery-1.12.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    if(typeof FileReader == "undified") {
    alert("您老的浏览器不行了!");
    }

    function showDataByURL() {
    var resultFile = document.getElementById("fileDemo").files[0];
    if (resultFile) {
    var reader = new FileReader();
    reader.readAsDataURL(resultFile);
    reader.onload = function (e) {
    var urlData = this.result;
    document.getElementById("result").innerHTML += "<img src='" + urlData + "' alt='" + resultFile.name + "' />";
    };
    }
    }

    function showDataByBinaryString() {
    var resultFile = document.getElementById("fileDemo").files[0];
    if (resultFile) {
    var reader = new FileReader();
    //异步方式,不会影响主线程
    reader.readAsBinaryString(resultFile);
    reader.onload = function(e) {
    var urlData = this.result;
    document.getElementById("result").innerHTML += urlData;
    };
    }
    }

    function showDataByText() {
    var resultFile = document.getElementById("fileDemo").files[0];
    if (resultFile) {
    var reader = new FileReader();
    reader.readAsText(resultFile,'gb2312');
    reader.onload = function (e) {
    var urlData = this.result;
    document.getElementById("result").innerHTML += urlData;
    };
    }
    }

    </script>
    </head>
    <body>
    <input type="file" name="fileDemo" id="fileDemo" multep/>
    <input type="button" value="readAsDataURL" id="readAsDataURL" onclick="showDataByURL();"/>
    <input type="button" value="readAsBinaryString" id="readAsBinaryString" onclick="showDataByBinaryString();"/>
    <input type="button" value="readAsText" id="readAsText" onclick="showDataByText();"/>
    <div id="result">
    </div>
    </body>
    </html>

    图片拖拽上传:

    <!DOCTYPE html>
    <html>
    <head lang="en"> <meta charset="UTF-8">
    <title></title>
    <style> #div{
    200px;
    height: 200px;
    margin: 100px;
    }
    </style>
    <script>
    /* dataTransfer对象:
    16 1.files:获取外部拖拽的文件,返回一个filesList列表,是对象集合,自然有length属性;
    17 2.filesList下有个type属性,返回文件的类型;
    18 3.fileReader:读取文件信息
    19 ①readAsDataURL(argument):参数为读取的文件对象,将文件读取为DataUrl;
    20 ②onload:当文件读取成功时触发此事件;
    21 ③this.result:获取读取的文件数据,如果是图片,将返回base64格式的图片数据;
    22 */
    onload= function () {
    var oDiv=document.getElementById('div');
    var oUl=document.getElementById('ul');

    oDiv.ondragenter= function () {
    this.innerHTML='现在可以释放文件了';
    }
    oDiv.ondragover= function (ev) {
    ev=ev||event;
    ev.preventDefault();
    }
    oDiv.ondragleave= function () {
    this.innerHTML='将文件拖放到此区域';
    }
    oDiv.ondrop= function (ev) {
    ev=ev||event;
    ev.preventDefault();
    var fs = ev.dataTransfer.files;
    //浏览器的默认行为是:将图片文件拖放到此处会在浏览器中打开图片 var fs=ev.dataTransfer.files;
    //console.log(fs.length);
    //console.log(fs[0].type);
    for(var i= 0,len=fs.length;i<len;i++){
    /* indexOf(searchvalue,formindex):返回某个指定的字符串值在字符串中首次出现的位置。
    45 1.searchvalue:规定需检索的字符串类型;
    46 formindex:可选的整数参数,规定在字符串中需检索的位置,它的合法取值是0-stringObject.length-1,如果省略此参数,则将从字符串的首字符开始检索;
    47 2.该方法将从头到尾地检索字符串 stringObject,看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头(没有指定 fromindex 时)。
    48 如果找到一个 searchvalue,则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。
    49 3.indexOf()对大小写敏感;
    50 4.如果要检索的字符串没有出现,则返回-1;
    51 */
    if(fs[i].type.indexOf('image')!==-1){
    var fd = new FileReader();
    fd.readAsDataURL(fs[i]);
    fd.onload= function () {
    //console.log(this.result);
    var oLi=document.createElement('li');
    var oImg=document.createElement('img');
    oImg.src=this.result;
    oUl.appendChild(oLi);
    oLi.appendChild(oImg);
    }
    }else{
    alert('亲,请上传图片!');
    }
    }

    }
    }
    </script> </head>
    <body>
    <div id="div">将文件拖放到此区域</div>
    <ul id="ul"></ul>

    </body>
    </html>

  • 相关阅读:
    HTML 块级、内联、内联块级元素(转)
    CSS margin-top父元素下落
    JS 窗口resize避免触发多次
    ASP.NET 自制免费.NET代码生成器KevinCodeBuilder
    Plugin 中国省市选择插件
    Git 常用命令(转)
    JS Regex正则表达式的使用(转)
    Git 详细中文安装教程(转)
    业务逻辑中的测试总结(一)----比值类需求测试分解
    python学习笔记系列----(四)模块
  • 原文地址:https://www.cnblogs.com/myspecialzone/p/5909369.html
Copyright © 2011-2022 走看看