找回密码
 立即注册
首页 其他语言 javasctipt 查看内容
不废话直接上代码.前端代码如下

<form class="form-group" style="overflow:hidden;">
               <div class="col-md-10" style="padding-left: 0px;">
                <div class="input-group">
                    <span class="input-group-addon">主图</span>
                    <input type="text" class="form-control" id="app_logo" placeholder="应用图片,不支持中文名称!">
                </div>
               </div>
               <input type="file" id="btn_file" style="display:none;">
               <input type="button" class="btn btn-info col-md-2" value="上传图片">
            </form>


js如下:
定义两个按钮为了美观!
function open_file(){
    document.getElementById('btn_file').click();  //点击按钮打开文件选择窗口
}

function upload_img(event){
    var image = event.value;  //获取到上传文件名
    if (!/\.png$|\.jpg$|\.gif|\.jpeg|\.bmp/i.test(image)){
        zhalert.alertErrorToast('上传类型错误'); 用正则判断是否是图片类型
        return;
    }
    var files_event = event.files[0]; //获取到文件对象
    if (files_event.size > 1048576){
        zhalert.alertErrorToast('上传图片不得大于1mb!') //判断是否小于1mb
    }else{
        var file_data = new FormData(); //创建FormData
        file_data.append('action', 'UploadVMKImagePath');
        file_data.append('file', files_event); //把数据添加到FormData
        zhajax.ajax({ //剩下的就是上传文件,按照要求填写参数即可!
            url:'/admin/upload/',
            type:'POST',
            data:file_data,
            dataType: 'JSON',
            cache: false,
            processData: false,
            contentType: false,
            mimeType:"multipart/form-data",
            success:function(data){
                console.log(data);
                if (data['data'] || !data['data']['img_url']){
                    document.getElementById('app_logo').value = data['data']['img_url'];
                }}})}
}

点击进入:flask获取上传文件并验证文件
分享至 : QQ空间
收藏
您需要登录后才可以回帖 登录 | 立即注册