var setheight = document.getElementById("maxheight"); setheight.addEventListener(" click", function(e){
プレビュー画像の表示など、その他の処理も行うことができます。ただし、画像を圧縮したくない場合は、おそらく役に立ちません。 Ajaxを使用して、HTTPポストメソッドで画像データをアップロードします。次の例では、Dojo フレームワークを使用してリクエストを完了します。もちろん、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
文字列パス = request.getContextPath();
StringbasePath = request.getScheme() "://" request.getServerName() ":" request.getServerPort() パス "/";
%>
キャンバスおよびファイル API 経由で上に送信された画像 // パラメータ、最大高さ
var MAX_HEIGHT = 100;
// 渲染
function render(src){
// 创建一个 Image 对象
var image = new Image();
// 绑定loadイベント处理器、追加完了後実行
image.onload = function(){
// Canvas DOM对象の取得
var Canvas = document.getElementById("myCanvas") ;
// 如果高超标
if(image.height > MAX_HEIGHT) {
// 宽度等比缩放 *=
image.width *= MAX_HEIGHT / image.height;
画像.高さ = MAX_HEIGHT;
}
// Canvas の 2D 環境オブジェクトを取得します。
// 理解できる Context は管理员、canvas は房子
var ctx = Canvas.getContext("2d");
// Canvas清屏
ctx.clearRect(0, 0, Canvas.width, Canvas.height);
// 重置canvas宽高
canvas.width = image.width;
canvas.height = image.height;
// 画像をキャンバス上に展開
ctx.drawImage(image, 0, 0, image.width, image.height);
// !!! 注意，画像はdom之中に追加されていません
};
// src プロパティを設定します。視聴者は自動的に追加します。
// 事前に決定する必要があるイベントを認識します。src プロパティを設定できないと、同期問題が発生する可能性があります。
image.src = src;
};
// 追加画像文件(url路径)
functionloadImage(src){
// 非画像型文件
if(!src.type.match(/image.*/ )){
if(window.console){
console.log("选择的文件型不是图片: ", src.type);
} else {
window.confirm("只能选择图片文件");
}
戻る;
}
// 创建 FileReader 对オブジェクト 并调用 render 関数数来渲染を完了します。
var リーダー = new FileReader();
// 绑定loadイベント自動回调関数数
reader.onload = function(e){
// 前のレンダリング関数数
render(e.target.result);
};
// 文件内容の读取
reader.readAsDataURL(src);
};
// 上传图片，jQuery 版
function sendImage(){
// キャンバス DOM 对象を取得
var Canvas = document.getElementById("myCanvas");
//Base64 暗号化後の画像データを取得します。形式は文字列です。
// "data:image/png;base64," は、ゲスト端末またはサービス端末で削除する必要があり、後ろの部分は直接削除できます。
var dataurl = Canvas.toDataURL("image/png");
// 安全な对URI进行编码
// data:image/png;base64, 开头
var imagedata = encodeURIComponent(dataurl);
//var url = $("#form").attr("action");
// 1. 如果形式表单不好処理、设求地址を設定するには特定の隠しフィールドを使用できます
//
var url = $("input[name='action']").val();
// 2. 特定のdomオブジェクトのプロパティを直接使用して取得することもできます。
//
// var url = $("#imageaction").attr("action");
// 文字列であるため、サーバーはデータの転送や文書操作などを行う必要があります。
//console.log(画像データ);
var data = {
画像名: "myImage.png",
画像データ: 画像データ
};
jQuery.ajax( {
url : url,
data : data,
type : "POST",
// 期待される戻り值类型
dataType: "json",
complete : function(xhr,result) {
//console.log(xhr.responseText);
var $tip2 = $("#tip2");
if(!xhr);
$tip2.text('网络接失败!');
return false;
}
if(!text){
$tip2 .text('网络错误!');
return false;
var json = eval("(" text ")"); tip2.text('解析错误!');
return false;
$tip2.text(json.message);
//console.dir(json) );
//console.log(xhr.responseText)
}
});
};
function init(){
// 获取DOM元素对象
var target = document.getElementById("drop-target");
// ドラッグオーバー (DOM 要素の上にドラッグ) イベント配信を防止します
target.addEventListener("dragover", function(e){e.preventDefault( ) ;}, true);
// マウスイベントをドラッグして放します
target.addEventListener("drop", function(e){
// デフォルトのイベントとイベントの伝播を防止します
e.preventDefault ();
// 前のイメージ読み込み関数を呼び出します。パラメータは dataTransfer オブジェクトの最初のファイル
loadImage(e.dataTransfer.files[0])、
; >var setheight = document.getElementById("setheight");
var maxheight = document.getElementById("maxheight");
setheight.addEventListener("click", function(e){
//
var value = maxheight.value;
if(/^d $/.test(value)){
MAX_HEIGHT = parseInt(value);
e.preventDefault( ); 🎜>},true);
var btnsend = document.getElementById("btnsend");
btnsend.addEventListener("click", function(e){
//
sendImage();
},true);
window.addEventListener("DOMContentLoaded", function() {
//
init();
}, false) ; >
キャンバスとファイル API を使用して画像をアップロードします >
写真を下のボックスにドラッグすると、キャンバスと JavaScript が自動的に拡大縮小されます。
input type="text" id=" maxheight" value="100"/>
画像ファイルをここにドラッグします...
id="プレビュー" style="background:#f4f4f4;width:400px;height:200px;min-height:100px;min-width:200px;">
サーバー ページ、receive.jsp
コードをコピー
コード 次のように:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="sun.misc.BASE64Decoder"%>
<%@page import="java.io.*"%>
<%@page import="org.springframework.web.util.UriComponents"%>
<%@page import="java.net.URLDecoder"%>
<%!
// 本文件：/receive.jsp
// 图片存放路径
String photoPath = "D:/blog/upload/photo/";
File photoPathFile = new File(photoPath);
// references: http://blog.csdn.net/remote_roamer/article/details/2979822
private boolean saveImageToDisk(byte[] data,String imageName) throws IOException{
int len = data.length;
//
// 写入到文件
FileOutputStream outputStream = new FileOutputStream(new File(photoPathFile,imageName));
outputStream.write(data);
outputStream.flush();
outputStream.close();
//
return true;
}
private byte[] decode(String imageData) throws IOException{
BASE64Decoder decoder = new BASE64Decoder();
byte[] data = decoder.decodeBuffer(imageData);
for(int i=0;i{
if(data[i]<0)
{
//调整异常数据
data[i] =256;
}
}
//
return data;
}
%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() "://" request.getServerName() ":" request.getServerPort() path "/";
%>
<%
//如果是IE，那么需要设置为text/html,否则会弹框下载
//response.setContentType("text/html;charset=UTF-8");
response.setContentType("application/json;charset=UTF-8");
//
String imageName = request.getParameter("imagename");
String imageData = request.getParameter("imagedata");
int success = 0;
String message = "";
if(null == imageData || imageData.length() < 100){
// 数据太短，明显不合理
message = "上传失败,数据太短或不存在";
} else {
// 去除开头不合理的数据
imageData = imageData.substring(30);
imageData = URLDecoder.decode(imageData,"UTF-8");
//System.out.println(imageData);
byte[] data = decode(imageData);
int len = data.length;
int len2 = imageData.length();
if(null == imageName || imageName.length() < 1){
imageName = System.currentTimeMillis() ".png";
}
saveImageToDisk(data,imageName);
//
success = 1;
message = "上传成功,参数长度:" len2 "字符，解析文件大小:" len "字节";
}
// 后台打印
System.out.println("message=" message);
%>
{
"message": "<%=message %>",
"success": <%=success %>
}
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
