$.ajax({
url: 'http://target.site/upload',
type: 'POST',
data: {
photo: ???
}
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Загрузка файла по URL</title>
<style type="text/css">
@import url('//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css');
body {
padding: 20px;
}
</style>
<script src="../js/jquery-2.1.4.min.js"></script>
</head>
<body>
<form class="form-horizontal" id="img2b64">
<h2>Input</h2>
<div class="form-group">
<label class="col-sm-2 control-label">Convert via:</label>
<div class="col-sm-10">
<select class="form-control" name="convertType">
<option value="Canvas" selected>Canvas</option>
<option value="FileReader">FileReader</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">URL:</label>
<div class="col-sm-10">
<input type="url" name="url" class="form-control" placeholder="Insert an IMAGE-URL" value="http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png" required />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-default">
</div>
</div>
</form>
<div class="output form-horizontal" style="display: none">
<hr>
<h2>Output</h2>
<div> <strong class="col-sm-2 text-right">Converted via:</strong>
<div class="col-sm-10"> <span class="convertType"></span> </div>
</div>
<div> <strong class="col-sm-2 text-right">Size:</strong>
<div class="col-sm-10"> <span class="size"></span> </div>
</div>
<div> <strong class="col-sm-2 text-right">Text:</strong>
<div class="col-sm-10">
<textarea class="form-control textbox"></textarea>
</div>
</div>
<div> <strong class="col-sm-2 text-right">Link:</strong>
<div class="col-sm-10"> <a href="#" class="link"></a> </div>
</div>
<div> <strong class="col-sm-2 text-right">Image:</strong>
<div class="col-sm-10"> <img class="img" alt=""> </div>
</div>
</div>
<script>
// Конвертируем файл с помощью Canvas
function convertImgToDataURLviaCanvas(url, callback, outputFormat) {
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function() {
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var dataURL;
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
callback(dataURL);
canvas = null;
};
img.src = url;
}
// Конвертируем файл с помощью FileReader
function convertFileToDataURLviaFileReader(url, callback) {
var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.send();
}
$('#img2b64').submit(function(event) {
var imageUrl = $('[name=url]',this).val(),
convertType = $('[name=convertType]',this).val(),
convertFunction = convertType === 'FileReader' ?
convertFileToDataURLviaFileReader :
convertImgToDataURLviaCanvas;
convertFunction(imageUrl, uploadImageToServer);
event.preventDefault();
});
function uploadImageToServer (base64Img){
$.ajax({
url: 'upload.php',
type: 'POST',
data: {
image: base64Img
},
success: function(result){
}
});
}
</script>
</body>
</html><?php
if(!empty($_POST['image'])) {
$data = explode(',', $_POST['image']);
file_put_contents('my-image.png',base64_decode($data[1]));
}
Простой
Средний
Простой