jq ajax文件上传（h5文件上传，后端接收异常，不小心传为字符串形式了）
jq ajax文件上传的时候，要小心传到后端不是二进制文件流
重点就是这个设置：contentType: 'multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW',
contentType要么如上设置，要么设置为false，否则文件就会被当做字符串传递给后端
特别注意：如果是uniapp转成的h5一定不要修改uniapp默认的contentType，默认值示例：contentType: 'multipart/form-data',
好了上完整示例
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
<input type="file" id="file1">
<button id="btnUpload">upload</button>
<br>
<img src="1.png" alt="" style="width: 200px;" id="img1">
<img src="jzz.png" alt="" style="display: none;" id="loading" width="50px" height="50px">
<script>
//监听传输
$(document).ajaxStart(function () {
$('#loading').show()
})
$(document).ajaxStop(function () {
$('#loading').hide()
})
//建立单击事件
$('#btnUpload').on('click', function () {
let files = $('#file1')[0].files;
if (files.length <= 0) {
return alert('请选择文件后在上传')
}
//上传文件
let fd = new FormData();
fd.append('avator', files[0]);
//发起jquery ajax请求
$.ajax({
method: 'post',
url: 'http://xxxx/api/index/upload',//换成你的接口
data: fd,
processData: false,
contentType: 'multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW',
success: function (res) {
alert('upload success')
//$('#img1').attr('src', 'http://www.liulongbin.top:3006' + res.url)
console.log(res.url);
}
})
})
</script>
</body>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
<input type="file" id="file1">
<button id="btnUpload">upload</button>
<br>
<img src="1.png" alt="" style="width: 200px;" id="img1">
<img src="jzz.png" alt="" style="display: none;" id="loading" width="50px" height="50px">
<script>
//监听传输
$(document).ajaxStart(function () {
$('#loading').show()
})
$(document).ajaxStop(function () {
$('#loading').hide()
})
//建立单击事件
$('#btnUpload').on('click', function () {
let files = $('#file1')[0].files;
if (files.length <= 0) {
return alert('请选择文件后在上传')
}
//上传文件
let fd = new FormData();
fd.append('avator', files[0]);
//发起jquery ajax请求
$.ajax({
method: 'post',
url: 'http://xxxx/api/index/upload',//换成你的接口
data: fd,
processData: false,
contentType: 'multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW',
success: function (res) {
alert('upload success')
//$('#img1').attr('src', 'http://www.liulongbin.top:3006' + res.url)
console.log(res.url);
}
})
})
</script>
</body>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
<input type="file" id="file1">
<button id="btnUpload">upload</button>
<br>
<img src="1.png" alt="" style="width: 200px;" id="img1">
<img src="jzz.png" alt="" style="display: none;" id="loading" width="50px" height="50px">
<script>
//监听传输
$(document).ajaxStart(function () {
$('#loading').show()
})
$(document).ajaxStop(function () {
$('#loading').hide()
})
//建立单击事件
$('#btnUpload').on('click', function () {
let files = $('#file1')[0].files;
if (files.length <= 0) {
return alert('请选择文件后在上传')
}
//上传文件
let fd = new FormData();
fd.append('avator', files[0]);
//发起jquery ajax请求
$.ajax({
method: 'post',
url: 'http://xxxx/api/index/upload',//换成你的接口
data: fd,
processData: false,
contentType: 'multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW',
success: function (res) {
alert('upload success')
//$('#img1').attr('src', 'http://www.liulongbin.top:3006' + res.url)
console.log(res.url);
}
})
})
</script>
</body>
本代码，亲测可以正常运行，确实的图片，自己随便替换一下就行，这就是个demo
版权声明：
作者：admin
链接：http://blog.mryxh.cn/3144.html
文章版权归作者所有，未经允许请勿转载。
THE END
0
打赏
分享
二维码
海报
Chrome浏览器的跨域设置----包含新老版本两种设置(亲测可行)
注意：此方案仅适用于windows系统哦！！！--亲测可行
本方案使用于本地浏览器调试，能解决uniapp运行到浏览器引起的跨域问题
这是一篇姗姗来迟的文章，一直在……
html5录音功能实战示例（仅供参考）
备注：网上转发未亲自测试--仅供参考
缘起
由于项目需要，我们要在web端实现录音功能。一开始，找到的方案有两个，一个是通过iframe，一个是html5的getUserMed……
怎么把ANSI编码文件转换为UTF-8编码
在网上复制别人的代码，结果一运行就乱码了，后来发现是ansi编码的
尝试使用小青蛙编辑器直接转为utf8格式，能转成功，但是中文乱码了，怎么办？
解决办法
右……
jQuery关闭layer弹窗
jQuery关闭layer弹窗
var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
parent.layer.close(index);//关闭弹窗
window.parent.Dro……