jsp中javascript中的image怎么保存到服务器,web项目,求大神解答,困扰好久了
7条回答
- cpxxz 2018-04-02 07:41关注
一、jsp部分代码:
accept="image/*" size="1" />二、js代码
//全局对象,不同function使用传递数据
var imgFile = {};$('#informationPicFile').change(function(evnet){
handleInputChange(event);
});function handleInputChange (event) {
// 获取当前选中的文件
const file = event.target.files[0];
const imgMasSize = 1024 * 1024 * 10; // 10MB// 检查文件类型 if(['jpeg', 'png', 'gif', 'jpg'].indexOf(file.type.split("/")[1]) < 0){ // 自定义报错方式 // Toast.error("文件类型仅支持 jpeg/png/gif!", 2000, undefined, false); return; } // 文件大小限制 if(file.size > imgMasSize ) { // 文件大小自定义限制 // Toast.error("文件大小不能超过10MB!", 2000, undefined, false); return; } // 判断是否是ios if(!!window.navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){ // iOS transformFileToFormData(file); return; } // 图片压缩之旅 transformFileToDataUrl(file);
}
// 将File append进 FormData
function transformFileToFormData (file) {
const formData = new FormData();
// 自定义formData中的内容
// type
formData.append('type', file.type);
// size
formData.append('size', file.size || "image/jpeg");
// name
formData.append('name', file.name);
// lastModifiedDate
formData.append('lastModifiedDate', file.lastModifiedDate);
// append 文件
formData.append('file', file);
// 上传图片
uploadImg(formData);
}
// 将file转成dataUrl
function transformFileToDataUrl (file) {
const imgCompassMaxSize = 200 * 1024; // 超过 200k 就压缩// 存储文件相关信息 imgFile.type = file.type || 'image/jpeg'; // 部分安卓出现获取不到type的情况 imgFile.size = file.size; imgFile.name = file.name; imgFile.lastModifiedDate = file.lastModifiedDate; // 封装好的函数 const reader = new FileReader(); // file转dataUrl是个异步函数,要将代码写在回调里 reader.onload = function(e) { const result = e.target.result; if(result.length < imgCompassMaxSize) { compress(result, processData, false ); // 图片不压缩 } else { compress(result, processData); // 图片压缩 } }; reader.readAsDataURL(file);
}
// 使用canvas绘制图片并压缩
function compress (dataURL, callback, shouldCompress = true) {
const img = new window.Image();img.src = dataURL; img.onload = function () { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0, canvas.width, canvas.height); let compressedDataUrl; if(shouldCompress){ compressedDataUrl = canvas.toDataURL(imgFile.type, 0.2); } else { compressedDataUrl = canvas.toDataURL(imgFile.type, 1); } callback(compressedDataUrl); }
}
function processData (dataURL) {
// 这里使用二进制方式处理dataUrl
var dUrl = dataURL;
const binaryString = window.atob(dUrl.split(',')[1]);
const arrayBuffer = new ArrayBuffer(binaryString.length);
const intArray = new Uint8Array(arrayBuffer);
const imgFile = this.imgFile;for (let i = 0, j = binaryString.length; i < j; i++) { intArray[i] = binaryString.charCodeAt(i); } const data = [intArray]; let blob; try { blob = new Blob(data, { type: imgFile.type }); } catch (error) { window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder; if (error.name === 'TypeError' && window.BlobBuilder){ const builder = new BlobBuilder(); builder.append(arrayBuffer); blob = builder.getBlob(imgFile.type); } else { // Toast.error("版本过低,不支持上传图片", 2000, undefined, false); throw new Error('版本过低,不支持上传图片'); } } // blob 转file const fileOfBlob = new File([blob], imgFile.name); const formData = new FormData(); // type formData.append('type', imgFile.type); // size formData.append('size', fileOfBlob.size); // name formData.append('name', imgFile.name); // lastModifiedDate formData.append('lastModifiedDate', imgFile.lastModifiedDate); // append 文件 formData.append('file', fileOfBlob); uploadImg(formData);
}
// 上传图片
function uploadImg (formData) {
const xhr = new XMLHttpRequest();// 进度监听 xhr.upload.addEventListener('progress', (e)=>{console.log(e.loaded / e.total)}, false); // 加载监听 // xhr.addEventListener('load', ()=>{console.log("加载中");}, false); // 错误监听 xhr.addEventListener('error', ()=>{Toast.error("上传失败!", 2000, undefined, false);}, false); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { const result = JSON.parse(xhr.responseText); if (xhr.status === 200) { // 上传成功 if(result.errcode==0&&result.retcode==0){ var imgUrl = result.data.avatarFile; $(".MinePortaritInformation").css("background-image","url("+imgUrl+")"); }else{ $.alert(result.message); } } else { // 上传失败 $.alert("上传头像失败"); } } }; //修改成自己的上传URL
xhr.open('POST', '/upload/uploadAvatar.do' , true);
var result = xhr.send(formData);
}
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 eclipse运行项目时遇到的问题
- ¥15 关于#c##的问题:最近需要用CAT工具Trados进行一些开发
- ¥15 南大pa1 小游戏没有界面,并且报了如下错误,尝试过换显卡驱动,但是好像不行
- ¥15 没有证书,nginx怎么反向代理到只能接受https的公网网站
- ¥50 成都蓉城足球俱乐部小程序抢票
- ¥15 yolov7训练自己的数据集
- ¥15 esp8266与51单片机连接问题(标签-单片机|关键词-串口)(相关搜索:51单片机|单片机|测试代码)
- ¥15 电力市场出清matlab yalmip kkt 双层优化问题
- ¥30 ros小车路径规划实现不了,如何解决?(操作系统-ubuntu)
- ¥20 matlab yalmip kkt 双层优化问题