文件上传框的美化+预览+ajax

最新推荐文章于 2021-06-08 16:20:41 发布

weixin_33881753

最新推荐文章于 2021-06-08 16:20:41 发布

阅读量378

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/eyesmoon/p/7246250.html

本文介绍了HTML中文件上传的基本写法及美化方法，并详细解释了如何使用HTML5实现文件上传前的预览功能，包括如何设置表单的enctype属性以支持文件上传，以及如何通过iframe实现异步上传。

1、文件上传基本写法：

<input type="file" name="" id="" value="" />
2、文件框美化
 
文件域

<div class="div1">
    <div class="div2">上传图片</div>
    <label class="inputstyle" for="imgUpload">上传图片</label>
</div>
 
<!-- 图片上传区域-->
<iframe id="myiframe" name="myiframe" style="display:none;" onLoad="iframeLoad(this)"></iframe>
<form id="uploadPicForm" style="position: relative;margin: 0" action="safetyperformController/imgUpload" method="post" enctype="multipart/form-data" target="myiframe">
        <input id="fileId" name="fileId" type="hidden">
        <input id="imgUpload" class="imgUpload" type="file" name="file" multiple="true" size="28" accept="image/jpeg,image/png"/>
</form> 
样式

.div1 {
    float: left;
    height: 25px;
    background: #C7BEBE;
    width: 88%;
    position: relative;
    border-radius: 5px;
}

.div2 {
    text-align: center;
    padding-top: 5px;
    font-size: 12px;
}

.inputstyle {
    width: 88%;
    height: 25px;
    cursor: pointer;
    font-size: 20px;
    outline: medium none;
    position: absolute;
    filter: alpha(opacity = 0);
    -moz-opacity: 0;
    opacity: 0;
    left: 0px;
    top: 0px;
    background: #C7BEBE;
}
3、使用注意
1>使用input[type=file]时要注意一定要包裹在form表单内部，form表单要声明编码类型enctype="multipart/form-data"。
2>input下的value值无法修改。
 
4.上传前预览和Ajax传输
尤其在做图片上传时，我们会用到预览。在HTML5还没出现的旧时代，只有低版本的IE浏览器貌似有方法，使用私有的滤镜，超越安全的限制（其实是利用了不好的东西），实现图片直接预览；但是呢，那个时候，Chrome,
 FireFox没有这一出，于是，想要使用原生file 
input实现图片的上传前预览，兼容性坎很难跨过去。随着H5出现。可以让我们直接读取图片的数据，然后在页面上呈现，实现了上传前预览。对低版本的IE则可以使用滤镜去兼容。
传统的form表单提交后，页面刷新后跳转。使用Ajax让用户有了跟好的体验。HTML5里面支持二进制formData数据提交，因此，可以从容Ajax提交上传的文件数据；那老旧的IE浏览器怎么办？
一般方法如下：
form元素新增target属性，其值指向页面内隐藏的一个<iframe>元素的id, 如下：

<form action="" method="post" enctype="multipart/form-data" target="uploadIframe"><
<iframe id="uploadIframe"></iframe>  
处理<iframe>元素的onload事件，获得返回内容。

var doc = iframe.contentDocument ? iframe.contentDocument : frames[iframe.id].document;
var response = doc.body && doc.body.innerHTML;