子罕言利与命与仁

图片上传预览

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>图片上传</title>

<style type="text/css">

    ​body{ font-size:14px;}

    ​input{ vertical-align:middle; margin:0; padding:0}

    ​.file-box{ position:relative;width:340px}

    ​.txt{ height:22px; border:1px solid #cdcdcd; width:180px;}

    ​.btn{ border:1px solid #CDCDCD;height:24px; width:70px;}

    ​.file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }

</style>

</head>

<body>

    ​<div>

    ​    <form action="" method="post" enctype="multipart/form-data">

    ​        <input type="text" name="textfield" id="textfield" />

    ​        <input type="button" value="浏览..." />

    ​        <input type="file" name="fileField" id="fileField" size="28" onchange="document.getElementById(" textfield").value=this.value" />

    ​        <input type="submit" name="submit" value="上传" />

    ​        <div id="demo_result"></div>

    ​    </form>

    ​</div>

</body>

<script type="text/javascript">

    ​var result = document.getElementById("demo_result");

    ​var input = document.getElementById("fileField");

    ​if (typeof FileReader === "undefined") {

    ​    ​result.innerHTML = '<p>抱歉,你的浏览器不支持 FileReader</p>';

    ​    ​input.setAttribute("disabled", "disabled");

    ​} else {

    ​    ​input.addEventListener("change", readFile, false);

    ​}

    ​function readFile() {

    ​    ​for (var i = 0; i < this.files.length; i++) {

    ​    ​    ​var file = this.files[i];

    ​    ​    ​if (!/image\/\w+/.test(file.type)) {

    ​    ​    ​    ​alert("请确保文件为图像类型");

    ​    ​    ​    ​return false;

    ​    ​    ​}

    ​    ​    ​var reader = new FileReader();

    ​    ​    ​reader.readAsDataURL(file);

    ​    ​    ​reader.onload = function(e) {

    ​    ​    ​    ​result.innerHTML += '<img src="' + this.result + '" alt=""/>';

    ​    ​    ​}

        ​​}

    ​}

</script>

</html>

 

posted @ 2018-11-13 19:23  日出的幻景  阅读(148)  评论(0编辑  收藏  举报
Top