使用ajax上传文件

在前端多数需求中会出现直接点击上传图标，文件直接上传，后显示上传图片或显示文档图片，而html自带的<input type='file' >标签无法直接做到这点，而且会显示丑陋的文件名比如这个：，
而网上也出现的多种上传文件的js框架，功能多样甚至可以上传多文件，功能强大。不过看着那些文档说明，总是心中万马奔腾。还要添加几个css,js文件或是七七八八的东西，框架的样式还和项目的格格不入。

基本思路：

1 隐藏表单，就是隐藏丑，
2 使用change，当input发生变化时触发对应函数。
3 使用new FormData()上传文件，关于formData可参考：http://www.jianshu.com/p/46e6e03a0d53

code实例

在html中隐藏一个from表单(liuc_ex_upload_file_form)及点击按钮(ex_upload_file_but)，注意form表单中药使用 “enctype='multipart/form-data'”，在使用上传文件时一定要使用该属性值

<button class="ex_upload_file_but">我是按钮</button>

<div style="display: none">
    <form class="liuc_ex_upload_file_form" enctype="multipart/form-data">
      <input class="liuc_ex_upload_file_input" type="file" name="photo">
   </form>
</div>

点击按钮，触发liuc_ex_upload_file_input，弹出文选框

$(document).on('click','.ex_upload_file_but',function () {
        return  $(".liuc_ex_upload_file_input").click();
    });

选择文件后，liuc_ex_upload_file_input 值发生变化，触发上传文件事件，进行文件上传，其中FormData兼容到ie10以上，可以使用ajaxSubmit代替，我没试用过。

$(document).on('change','.liuc_ex_upload_file_input',function () {
        var formData = new FormData($(".liuc_ex_upload_file_form")[0]);

        $.ajax({
            url: url,
            type: "POST",
            data: formData,
            contentType: false, //必须false才会避开jQuery对 formdata 的默认处理 XMLHttpRequest会对 formdata 进行正确的处理
            processData: false, //必须false才会自动加上正确的Content-Type
            success: function (data) {
                //调用用户处理函数
                func(JSON.parse(data));
            }
        });
    });

code封装使用

//定义上传按钮
<button class="rob-btn ex_upload_file_but">点击上传2</button> 

//调用上传方法，传入上传地址，及服务端返回值处理方法
upload_model("上传地址",function (data) {

        console.log(data);
    });

/**
 * 单个图片上传模块 
 * @author liuc
 */
function upload_model(url,func){

    var exist = $(".ex_upload_file_but");
    //判断是否存在该元素
    if (exist.length <= 0 ){
        return;
    }
    //在body末尾添加隐藏form表单
    $("body").append("<div style='display: none'>"+
        "<form class='liuc_ex_upload_file_form' enctype='multipart/form-data'>"+
        "<input class='liuc_ex_upload_file_input' type='file' />"+
        "</form></div>");

    //点击触发上传图片本地文本框弹出
    $(document).on('click','.ex_upload_file_but',function () {
        return  $(".liuc_ex_upload_file_input").click();
    });

    //liuc_ex_upload_file_input 变更时触发上传文件
    $(document).on('change','.liuc_ex_upload_file_input',function () {
        var formData = new FormData($(".liuc_ex_upload_file_form")[0]);

        $.ajax({
            url: url,
            type: "POST",
            data: formData,
            contentType: false, //必须false才会避开jQuery对 formdata 的默认处理 XMLHttpRequest会对 formdata 进行正确的处理
            processData: false, //必须false才会自动加上正确的Content-Type
            success: function (data) {
                //调用用户处理函数
                func(JSON.parse(data));
            }
        });
    });
}