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

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;
     88%;
    position: relative;
    border-radius: 5px;
}

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

.inputstyle {
     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浏览器怎么办？

一般方法如下：

1. form元素新增target属性，其值指向页面内隐藏的一个<iframe>元素的id, 如下：

   <form action="" method="post" enctype="multipart/form-data" target="uploadIframe"><
   <iframe id="uploadIframe"></iframe>  

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

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