js+ajax 上传单图片

复制代码
//单图片上传
$('#cover').on('change',function(){ var filePath = $(this)[0].files[0].name //获取到input的value,里面是文件的路径 var fileFormat = filePath.split('.')[1].toLowerCase() // 检查是否是图片 if( !fileFormat.match(/png|jpg|jpeg/) ) { alert('上传错误,文件格式必须为:png/jpg/jpeg') return } var formData = new FormData(); formData.append('upfile', $(this)[0].files[0]); //添加图片信息的参数 $.ajax({ url: "/upload", //自己的路径 type: "post", dataType: "json", cache: false, mimeType: "multipart/form-data", data: formData, processData: false,// 不处理数据 contentType: false, // 不设置内容类型 async:false, success:function (result){ $('#smallCover').attr('src',result) $('#x_thumb').val(result) } }); });
<div style="display:flex;margin-bottom:20px;">
     <input type="text" readonly placeholder="请选择图片" class="form-control col-sm-6" id="s_idcard" name="s_idcard" value="{$items['s_idcard']}"> 
     <input type="text" style="width: 100px;" readonly value="请选择图片" class="btn btn-default" >
     <input type="file" id="cover" name="cover" class="btn btn-default" style="width: 100px;height:35px;line-height:85px;position: absolute;right: 15px;z-index: 1;background: transparent;" />
</div>
<img id="smallCover" width=150 mode="widthFix" src="{$items['s_idcard']}">
复制代码
posted @   怂的一批的蜗牛  阅读(545)  评论(0编辑  收藏  举报
编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 地球OL攻略 —— 某应届生求职总结
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 提示词工程——AI应用必不可少的技术
· .NET周刊【3月第1期 2025-03-02】
点击右上角即可分享
微信分享提示