JQ处理文件上传的相关资料

实现文件上传-----前端要完成的内容：

第一步：样式

       一般浏览器自带的文件上传样式根本算不上什么美观，往往前端要对其进行处理成客户理想中的样式，其处理的思路是在其父元素上设置一个position:relative;在将其中的

<input type="file">这设置position:absolut;并将透明度设置为0，然后再另外写一个按钮和文本框去设置你理想中的样式，简单点就是将button盖在file的上面：

<div class="file_box">
    <input type="file" name="" class="file">
    <button class="file_btn">上传电子档</button>
    <span class="span">支持PPT、Word、Excel格式</span>
</div>

完成相关的基本的样式以后，还要用jq处理一下，就是你下面的span要显示文件上传的路径，这里使用的父元素的代理事件。

//文件上传位置的span显示上传的文件名
$(".file_box").on('change',function () {
    var str=$(".file").val();
    if(str!=""){
        $(".span").html(str);
    }
});

第二步：ajax注意的事项

       1，后台要用的接口名和文件上的name的取值一样的；

       2，前台获取文件上传的数据的写法：$("").file[0];

       3，对接数据的时候，必须用form表单来取值 formInfo.append("file",file);，如果还有其他的值也必须如此（就是在页面上的数据用form标签包起来），ajax中的data:formInfo，当然前端的控制台上是无法输出fromInfo。

        4，判断文件上传的值是否为空，应该判断为undefinded。

        5，有时候在处理文件上传的时候需要，清除文件上传中的值，如下：

//PDF上传文件清空
var file = $("#file_path");
file.after(file.clone().val(""));
file.remove();
//当然还要清理一下span 的显示问题
$(".span").html("支持PPT、Word、Excel格式");