html5文件上传

作为H5的一部分,web存储得到了很好的支持,但不是存取数据的唯一方式,为了实现与存储相关的不同任务,也出现了其他几种不同的标准,其中一个就是File API,从技术角度讲他并不是h5的规范内容,但是现在的浏览器却是有着较好的支持,当然IE除外。

1.用input读取文本文件

<!DOCTYPE html>
<html>
<head>
<title>h5文件上传</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<style type="text/css">
.leftbox{
    width:50%;
    height:700px;
    border:1px #000 solid;
}
#fileOutput{
    width:90%;
    height:80%;
    border:1px #ccc solid;
}
</head>
<body>
    <div class="leftbox">
        <input id="fileInput" type="file" onchange="processFiles(this.files)" >
        <!-- <input id="fileInput" type="file" onchange="processFiles(this.files)" multiple> -->
        <div id="fileOutput">
        </div>
    </div>
</body>
<script type="text/javascript">


    function processFiles(files){
        var file = files[0];   //从input提供的文件集中取得第一个文件。若要选择儿多个文件使用multiple属性如上html代码,那么这里就要用个for循环了。。。。
        var reader = new FileReader(); //创建FileReader对象,以便处理文件
        reader.onload = function(e){//这个时间一旦发生,就表明数据存储完成
            var output = document.getElementById('fileOutput');
            output.textContent = e.target.result;//将内容复制到div中
        };
        reader.readAsText(file);//将取出的文本内容转换为长字符串,保存在onload事件的e.target.result中。
    }
</script>
</html>

2.通过拖拽读取图片文件

<!DOCTYPE html>
<html>
<head>
<title>h5文件上传</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<style type="text/css">
.rightbox{
    float:right;
    background-color: #ccc;
    width:50%;height:700px;
    margin-top: -701px;border:1px #000 solid;
}
#dropbox{
    margin:15px;
    width:300px; height:300px;
    border:3px dashed gray;
    border-radius: 8px;
    background-size: 100%;
    background-repeat: no-repeat;
    text-align: center;
}
#dropbox div{
    margin:100px 70px;
    color:orange; font-size: 25px;
    font-family: Verdana,Arial,sans-serif;
}
</style>
</head>
<body>

    <div class="rightbox">
        <div id="dropbox">
            <div>drop you image here......</div> 
        </div>
    </div>
</body>
<script type="text/javascript">

    var dropbox;
    window.onload = function(){
        dropbox = document.getElementById("dropbox");
        dropbox.ondrapenter = ignoreDrag;
        dropbox.ondrapover = ignoreDrag;
        dropbox.ondrop = drop;
    };
    function ignoreDrag(e){
        e.stopPropagation();
        e.preventDefault();//确保不会有其它元素取得这个事件
    }
    function drop(e){
        e.stopPropagation();
        e.preventDefault();//取消事件传播及默认行为

        var data = e.dataTransfer;//取得拖进来的文件
        var files = data.files;
        processFiles_one(files);//将其传给真真处理文件的函数。
    }
    function processFiles_one(files){
        var file = files[0];   
        var reader = new FileReader(); //创建FileReader对象,以便处理文件
        reader.onload = function(e){//这个时间一旦发生,就表明数据存储完成
            dropbox.style.backgroundImage = "url("' + e.target.result + '")";
        };
        reader.readAsDataURL(file);//读取图片
    }
</script>
</html>

3.html5+jquery实现拖拽上传图片并保存

<!DOCTYPE html>
<html lang>
<head>
<meta charset="UTF-8">
<title>H5+jquery拖拽</title>
<script src = "js/jquery-2.1.1.min.js"></script>
<style type="text/css">
.test{
    width:100%;
    height:600px;
}
#preview{
    margin:15px;
    width:500px; height:450px;
    border:3px dashed gray;
    border-radius: 8px;
    background-size: 100%;
    background-repeat: no-repeat;
    text-align: center;
}
#drop_area{
    margin:20px 70px;
    color:orange; font-size: 25px;
    font-family: Verdana,Arial,sans-serif;
}
</style>
</head>
<body>
<div class="test">
 <div id="drop_area">将图片拖拽到此区域</div> 
    <div id="preview"></div> 
</div>

</body>
<script>
$(function(){ 
    //阻止浏览器默认行。 
    $(document).on({ 
        dragleave:function(e){    //拖离 
            e.preventDefault(); 
        }, 
        drop:function(e){  //拖后放 
            e.preventDefault(); 
        }, 
        dragenter:function(e){    //拖进 
            e.preventDefault(); 
        }, 
        dragover:function(e){    //拖来拖去 
            e.preventDefault(); 
        } 
    }); 
    var box = document.getElementById('drop_area'); //拖拽区域 
    box.addEventListener("drop",function(e){ 
        e.preventDefault(); //取消默认浏览器拖拽效果 
        var fileList = e.dataTransfer.files; //获取文件对象 
        //检测是否是拖拽文件到页面的操作 
        if(fileList.length == 0){ 
            return false; 
        } 
        //检测文件是不是图片 
        if(fileList[0].type.indexOf('image') === -1){ 
            alert("您拖的不是图片!"); 
            return false; 
        } 

        //拖拉图片到浏览器,可以实现预览功能 
        var img = window.webkitURL.createObjectURL(fileList[0]); 
        var filename = fileList[0].name; //图片名称 
        var filesize = Math.floor((fileList[0].size)/1024);  
        if(filesize>500){ 
            alert("上传大小不能超过500K."); 
            return false; 
        } 
        var str = "<img src='"+img+"'><p>图片名称:"+filename+"</p><p>大小:"+filesize+"KB</p>"; 
        $("#preview").html(str); 

        //上传 
        xhr = new XMLHttpRequest(); 
        xhr.open("post", "upload.php", true); 
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); 

        var fd = new FormData(); 
        fd.append('mypic', fileList[0]); 

        xhr.send(fd); 
    },false); 
}); 

</script>
</html>

这里有几个重要的事件及其方法:

  • multiple属性,允许用户选择多个文件。
  • FileReader():用来提取文件的内容。
  • readAsText():用来处理包含文本内容的文件(只能处理文本,而不是二进制,即.docx和.xlsx文件)
  • readAsBinaryString():可以让应用处理二进制编码的数据。
  • readAsArrayBuffer():这个方法将数据读到一个数组中,每个数组项代表一字节数据。
  • readAsDataURL():让我们能方便的取得图片的数据。
  • dragleave: 当文件拖离后触发事件
  • drop:将文件拖到放置区后触发事件
  • dragenter:将文本进入拖入区发生的事件
  • dragover:将文本拖在放置区之上时
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的 ASP HTML5 文件上传示例: ```html <!DOCTYPE html> <html> <head> <title>ASP HTML5 文件上传示例</title> </head> <body> <form action="upload.asp" method="post" enctype="multipart/form-data"> <label for="file">选择文件:</label> <input type="file" name="file" id="file"><br> <input type="submit" name="upload" value="上传文件"> </form> </body> </html> ``` 在上面的代码中,我们创建了一个包含一个文件输入框和一个上传按钮的表单。当用户选择一个文件并点击上传按钮时,表单将通过 POST 方法提交到名为 "upload.asp" 的服务器端脚本。 接下来,我们需要编写服务器端 ASP 脚本来处理文件上传。以下是一个基本的示例: ```asp <% If Request.ServerVariables("REQUEST_METHOD") = "POST" Then Dim files : Set files = Upload.Files Dim file : Set file = files.Item("file") If file Is Nothing Then Response.Write "请选择一个文件." Else file.SaveAs Server.MapPath("uploads\" & file.FileName) Response.Write "文件已上传!" End If End If %> ``` 在上面的代码中,我们首先检查请求方法是否为 POST,以便确定表单是否已提交。然后,我们使用 Upload.Files 对象获取上传的文件集合,并使用 files.Item("file") 获取名为 "file" 的文件对象。如果没有选择文件,则返回错误消息。否则,我们使用 file.SaveAs 方法将文件保存到服务器上的 "uploads" 文件夹中,并返回成功消息。 请注意,我们使用 Server.MapPath 方法将文件保存到服务器上的本地路径中。因此,您需要确保服务器上已创建名为 "uploads" 的文件夹,并具有适当的权限。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值