文件上传框的美化+预览+ajax-白红宇

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

阅读量：6409 次

发布时间：2019-06-23

本文共 1354 字，大约阅读时间需要 4 分钟。

1、文件上传基本写法：

2、文件框美化

文件域

样式

.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, 如下：
```
          
           <
           
          
```

处理<iframe>元素的onload事件，获得返回内容。

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

转载于:https://www.cnblogs.com/eyesmoon/p/7246250.html

你可能感兴趣的文章