URL.createObjectURL(event.target.files[0] this makes me able to view the image just uploaded in the browser. Using the same hack is there a way, where I can store the file/image into a folder instead of URL?
console.debug(URL.createObjectURL(event.target.files[0]));
以上注销,这:blob:http%3A//mysite.localhost.com/f96c26b4-9938-4f6e-941e-edbdae3454c9
我只是想知道我是否可以用文件夹路径替换mysite.localhost.com
。我甚至尝试将URL替换为文件夹的完整路径,但createObjectURL
仅适用于URL
。有没有将文件保存到文件夹的功能?
答案 0 :(得分:3)
根据你的评论
我想保存在服务器端..
答案变为“是的,这是可能的”。
首先让我们解释你的错误观念:
方法URL.createObjectURL()
返回的字符串是指向浏览器内存中某个位置的URI,其中作为第一个参数传递的Blob将作为文件进行访问。
除了通过此URI之外,此文件不可访问,并且此URI仅适用于当前会话。您无法共享它,也无法从其他计算机访问它,甚至也无法使用其他浏览器从同一台计算机访问它。当调用它的文档将被关闭时,它将被删除(在某些实现中,它需要硬刷新)。
但你需要的是保存你传递的Blob
由于FormData
对象可以很容易地实现这一点,它允许您通过XHR请求发送它。
input.onchange = function() {
var formData = new FormData();
formData.append('file', this.files[0], 'yourFileName.ext');
var xhr = new XMLHttpRequest();
xhr.onload = callback; // assuming you've got a callback function
xhr.open('POST', yourServerSideFileHandlerScript);
xhr.send(formData);
};
或使用jQuery,
$(input).on('change', function() {
var formData = new FormData();
formData.append('file', this.files[0], 'yourFileName.ext');
$.ajax({
url: yourServerSideFileHandlerScript,
data: formData,
processData: false,
contentType: false,
type: 'POST',
success: callback
});
});
然后,您就可以像任何文件上传一样获得服务器端。
示例服务器端代码(此处为php):
if ( isset( $_FILES["file"] ) ){
$dir = 'some/dir/';
$blob = file_get_contents($_FILES["file"]['tmp_name']);
file_put_contents($dir.$_FILES["file"]["name"], $blob);
}