|
关键点：MultipartFile 如果需要使用 originalFileName 的扩展名来在服务器端生成文件，那么需要在前端 fromData() 使用三个入参的append方法
var form=new FormData();
form.append("file",result,"aa.png");
（感谢提供的基础框架?使用canvas上传图片+上传进度_邦杠的博客-CSDN博客）
<html>
<head>
? ? <title>Canvas 文件上传</title>
</head>
<body>
<input type="file" id="myfile"/>
<canvas id="myCanvas" width="200" height="250" style="border:1px solid #d3d3d3;">
</canvas>
<button οnclick="test()">提交</button>
<img src="http://XXX/download?name=cae7319987cb486dacd1dc402f0d802d.png" />
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
? ? //选择图片后
? ? myfile.οnchange=function () {
? ? ? ? createURLImg(myfile.files[0]);
? ? }
? ? var pen=myCanvas.getContext("2d");
? ? //加载入canvas
? ? function createURLImg(file,callback) {
? ? ? ? var imgUrl=URL.createObjectURL(file);
? ? ? ? var image=new Image();
? ? ? ? image.src=imgUrl;
? ? ? ? image.οnlοad=function (ev) {
? ? ? ? ? ? pen.drawImage(image,0,0,200,250);
? ? ? ? ? ? if(callback) callback();
? ? ? ? ? ? URL.revokeObjectURL(imgUrl);
? ? ? ? }
? ? }
? ? //提交按钮
? ? function test() {
? ? ? ? myCanvas.toBlob(function (result) {
? ? ? ? ? ? var form=new FormData();
? ? ? ? ? ? form.append("file",result,"aa.png");
? ? ? ? ? ? ajax(form);
? ? ? ? })
? ? }
? ??
? ? function biafenb(r) {
? ? ? ? if(!pen) pen=myCanvas.getContext("2d");
? ? ? ? pen.save();
? ? ? ? pen.globalAlpha=0.3;
? ? ? ? pen.fillRect(0,(1-r)*200,200,250);
? ? ? ? pen.globalAlpha=1;
? ? ? ? pen.fillStyle = "white";
? ? ? ? pen.font = "20px 微软雅黑";
? ? ? ? pen.textAlign='center';
? ? ? ? pen.fillText(Math.round(r*100)+"%",100,100);
? ? ? ? pen.restore();
? ? }
? ? function ajax(formData) {
? ? ? ? $.ajax({
? ? ? ? ? ? url:"http://XXX/upload",
? ? ? ? ? ? type:"post",
? ? ? ? ? ? Accept:"html/text;chatset=utf-8",
? ? ? ? ? ? contentType:false,
? ? ? ? ? ? data:formData,
? ? ? ? ? ? processData:false,
? ? ? ? ? ? xhr: function () {
? ? ? ? ? ? ? ? var myXhr = $.ajaxSettings.xhr();
? ? ? ? ? ? ? ? myXhr.upload.οnprοgress=function (ev) {
? ? ? ? ? ? ? ? ? ? pen.clearRect(0,0,200,250);
? ? ? ? ? ? ? ? ? ? createURLImg(myfile.files[0],function () {
? ? ? ? ? ? ? ? ? ? ? ? biafenb(ev.loaded/ev.total);
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? return myXhr;
? ? ? ? ? ? }, success: function (data) {
? ? ? ? ? ? ? ? console.log("上传成功!!!!");
? ? ? ? ? ? }, error: function () {
? ? ? ? ? ? ? ? console.log("上传失败！");
? ? ? ? ? ? }
? ? ? ? })
? ? }
</script>
</body>
</html>
|