保存静态图像的方式与上传的图像相同
save static image same way like uploaded image
我正在用JavaScript开发一组工具,我在保存静态图像时遇到了麻烦。首先,我创建了上传器来上传稍后保存在目录中的图像upload/
这些图像。
上传的图像(文件)将像这样发送到服务器:
$.ajax({
data: { file: e.dataTransfer.file },
url: 'server/uploading_files.php',
method: 'POST',
success: function (response) {
....
}
});
我很想对我只有路径的图像做同样的事情 ->静态保存它们。
问题出在我发送到服务器端的结构中。因为e.dataTransfer.file
看起来像这样:
FileList{0: File, length: 1}
0: File
lastModified:1441797733000
lastModifiedDate:Wed Sep 09 2015 13:22:13 GMT+0200 (CEST)
name:"sp_dom1.jpg"
size:563989
type:"image/jpeg"
webkitRelativePath:""
当我想保存静态图像时,我只有没有任何结构的路径。
有没有解决方案如何构建相同的结构来上传静态图像?我不想使用 2 个不同的.php文件进行保存。
您可以使用
XMLHttpRequest
,responseType
设置为 "blob"
,new File()
构造函数可在铬/铬 38+
var dfd = new $.Deferred();
var pathToImage = "http://lorempixel.com/50/50/";
var request = new XMLHttpRequest();
request.responseType = "blob";
request.open("GET", pathToImage);
request.onload = function() {
var file = this.response;
dfd.resolve(
new File([file]
, file.name
|| "img-" + new Date().getTime()
+ "." + file.type.split("/")[1]
, {
type: file.type
}
)
)
};
request.send();
dfd.then(function(data) {
// do stuff with `data`
// i.e.g.;
// $.ajax({
// data: { file: data },
// url: 'server/uploading_files.php',
// method: 'POST',
// success: function (response) {
// ....
// }
// });
console.log(data);
var img = new Image;
img.onload = function() {
$("body").append(this)
}
img.src = URL.createObjectURL(data);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
相关文章:
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 当按下箭头键时,我的图像以一种奇怪的方式跳跃(HTML+JS)
- 以编程方式将fabric-js-canvas的图像替换为hq图像,并重新计算其他对象的坐标和大小
- 保存静态图像的方式与上传的图像相同
- 如何以用户友好的方式在计算机上保存从画布转换的图像
- 在客户端调整图像大小/裁剪图像的最佳方式是什么
- 以类似视频的方式在浏览器中渲染多个图像
- 将文件夹中的所有图像包括在阵列中的最佳方式是什么
- Dropzone”;addedfile”;以程序方式添加图像时不会激发
- jquery悬停后恢复到原始图像是更好的方式
- 从mysql加载图像的正确方式
- 正在开发内存匹配游戏 - 您能否以不同的方式显示一张图像
- 如何以图像居中的方式设置网站的位置
- 显示动画图像的最佳方式(HTML/CSS/JS)
- Javascript:调整base64图像的大小并以非异步方式返回字符串
- 如何以编程方式将图像下载到iPad
- 以编程方式创建图像对象
- 使用PHP,CSS,JavaScript或任何可能的方式模糊不同帐户级别的图像
- 加载图像后的功能 - 正确的方式
- 更有效的预加载图像方式