jquery和layui上傳圖片

前言

沒有什麼說的，後端代碼省略，前端代碼也是貼重要部分

jquery上傳圖片

HTML代碼

<form enctype="multipart/form-data">
	<input type="file" name="headerImg" id="headerImg"/>	
</form>

js代碼

  	var formData = new FormData();
    var imagSize = $("#headerImg").get(0).files[0].size;
    if(imagSize>1024*2000){
        Feng.error("圖片大小要求在2兆以內");
        return;
    }
    var result =/\.[^\.]+$/.exec($("#headerImg").get(0).files[0].name);
    if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(result)) {
        Feng.error("圖片類型必須是.gif,jpeg,jpg,png,bmp中的一種");
        return;
    };
    formData.append("file",$("#headerImg").get(0).files[0]);
    $.ajax({
        url:"/header/add", /*接口地址*/
        type:'post',
        data: formData,
        contentType: false,
        processData: false,
        success:function(res){
  
        },error:function (data) {
         
        }
    })

layui上傳圖片

HTML部分

	 <div class="layui-form-item">
        <label class="layui-form-label">圖片</label>
        <div class="layui-input-block">
            <input type="hidden" name="img"/>
            <div id="img" style="width:150px;height:150px;border:1px solid #D2D2D2 !important"></div>
            <button type="button" class="layui-btn layui-btn-primary" id="imgBtn" style="margin-top: 20px;"><i class="layui-icon">&#xe67c;</i>上傳圖片</button>
        </div>
    </div>

js部分

	 upload.render({
            elem: '#imgBtn' ,
            url:  config.base_server + 'api-file/files-anon',
            accept: 'file' ,
            auto: true ,
            before: function(obj){
                layer.load(); //上傳loading
                //this.data={access_token:config.getToken().access_token};
                //預讀本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    //$(".layui-upload-img").remove();
                    $('#img').append('<img src="' + result + '" width="150px" height="150px" alt="' + file.name + '" class="layui-upload-img">')
                });
            },
            done: function(data){
                layer.closeAll('loading');
                console.log(data);
                $("[name=img]").val(data.url);
            },
            error: function (data) {
                layer.closeAll('loading');
            }
        });