任何機會,有沒有讓用戶從他的硬盤驅動器,而無需在瀏覽器提交給服務器使用這種圖像選擇圖像的一種方式?選擇圖像和操縱它在JavaScript(無表單提交)
我需要這個,因爲我希望用戶能夠這個裁剪後的圖像發送到服務器(這樣就節省了後,有些字節的數據)之前,裁剪圖像。
我試圖用一個輸入類型的文件,然後捕捉提交事件的事情,但是從輸入的數值只是一個假的路徑(沒用)。
任何幫助將不勝感激。
任何機會,有沒有讓用戶從他的硬盤驅動器,而無需在瀏覽器提交給服務器使用這種圖像選擇圖像的一種方式?選擇圖像和操縱它在JavaScript(無表單提交)
我需要這個,因爲我希望用戶能夠這個裁剪後的圖像發送到服務器(這樣就節省了後,有些字節的數據)之前,裁剪圖像。
我試圖用一個輸入類型的文件,然後捕捉提交事件的事情,但是從輸入的數值只是一個假的路徑(沒用)。
任何幫助將不勝感激。
你不能,以下原因:
對於這篇文章所陳述的理由:Full path from file input using jQuery
,如果你連嘗試創建一個img
元素加載 本地文件路徑,你會得到你的瀏覽器的控制檯錯誤Not allowed to load local resource:
的事實。
,一旦你在的地方有一個形象,你只能改變它事實上是 外觀上屏幕和不改變系統上的文件或發送的改變的圖像在服務器
你」我們已經表明您需要跨瀏覽器支持,因此HTML5 File API和Canvas API已經出來,儘管它們只允許部分功能。
新的HTML5文件API可能是最接近解決你想找的:
http://www.html5rocks.com/en/tutorials/file/dndfiles/
它可以讓你瀏覽和Javascript中讀取文件。做任何你喜歡的處理,然後上傳到服務器。除此之外的任何事情都會非常棘手,並且可能是不可避免的訪問服務器並返回。這裏
壞處就是瀏覽器支持.....一如既往
我不知道哪些瀏覽器完美地工作,但HTML5
得到了DnD
和File API
。讓我給你使用FileAPI
可以爲你工作的步驟。
DataTransfer
對象:呼叫DataTransfer.files
獲得FileList
,代表被丟棄的文件列表。FileReader
對象讀取其內容。文件API:使用FileReader.readAsDataURL(file)
通話,每一個文件完全讀取時間,一個新的「數據URL」 (RFC 2397)創建格式的對象和事件包裹它發射到onload
處理器上FileReader
對象。 FYI:在「data URL
」對象是Base64編碼的二進制數據,以字符的規範定義的報頭序列。瀏覽者瞭解他們。
HTML5 DOM:圖像0設置爲File Data URL
感謝您的回答,但據我所知,這隻支持鉻,所以它不會。 –
它也支持在Mozilla中。我正在使用'FileReader'對象在上傳之前顯示圖像的縮略圖。和其他HTML5的東西拖ñ下降,上傳進度等 – anu
這裏是一個非常基本的例子(與許多全局變量,而不輸入驗證...)圖像縮放的:http://jsfiddle.net/89HPM/3/。它使用了File API和一個畫布元素。 作爲@anu說,保存可以使用畫布toDataUrl方法來實現。 以類似的方式,你可以實現作物。
的JavaScript
(function init() {
document.getElementById('picture').addEventListener('change', handleFileSelect, false);
document.getElementById('width').addEventListener('change', function() {
document.getElementById('canvas').width = this.value;
renderImage();
}, false);
document.getElementById('height').addEventListener('change', function() {
document.getElementById('canvas').height = this.value;
renderImage();
}, false);
}());
var currentImage;
function handleFileSelect(evt) {
var file = evt.target.files[0];
if (!file.type.match('image.*')) {
alert('Unknown format');
}
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
currentImage = e.target.result;
renderImage();
};
})(file);
reader.readAsDataURL(file);
}
function renderImage() {
var data = currentImage,
img = document.createElement('img');
img.src = data;
img.onload = function() {
var can = document.getElementById('canvas'),
ctx = can.getContext('2d');
ctx.drawImage(this, 0, 0, can.width, can.height);
};
}
HTML
<input type="file" name="picture" id="picture" /><br />
<input type="text" id="width" value="200" />
<input type="text" id="height" value="200" /><br />
<canvas width="200" height="200" style="border: 1px solid black;" id="canvas"></canvas>
這裏是一個博客帖子我關於基本例如由:blog.mgechev.com
偉大的。然後使用'toDataURL()'將畫布保存爲圖像。等待所有瀏覽器正常運行的日子,特別是IE :) – anu
這很好用,但我想我可以省去編寫舊版瀏覽器的後備版本並將文件發佈到服務器的麻煩。無論如何,謝謝 –
不客氣:) –
我剛剛解決了一個問題,關閉到你的。
大家都說你不能得到真實的圖像文件地址。但是,您可以創建一個臨時路徑並在您的頁面中顯示圖像,而無需將其提交給服務器。我會在下一段的旁邊展示它是多麼容易。 一旦你顯示它,你可以使用一些javascripts事件來「僞造它」並獲取裁剪參數(角)。最後,您可以將params添加到某個隱藏字段並提交表單。因此,您可以使用som php在服務器上裁剪submited圖像,並使用多種圖像格式(如.png,jpg,gif等)保存結果。對不起,如果我沒有編寫完整的解決方案,沒有足夠的時間。
/* some scripting to bind a change event and to send the selected image
to img element */
$(document.ready(function(){
$("input:file").each(function(){
var id = '' + $(this).attr('id');
var idselector = '#'+id, imgselector=idselector+'-vwr';
$(idselector).bind("change", function(event){
(imgselector).fadeIn("fast").attr('src',
URL.createObjectURL(event.target.files[0]));
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!-- create a img element to show the selected image and an input file element to select the image.
ID attribute is the key to have an easy and short scripting
note they are related suffix -vwr makes the difference
-->
<img src="" id="image-input-vwr" alt="image to be cropped">
<input type="file" id="image-input" name="image_input">
希望它可以幫助一些機構,因爲它是一個非常古老的問題。
Luis G. Quevedo
如果基於Web的JavaScript可以操作客戶端硬盤上的文件,那將會很糟糕。 –
但在我的情況下,用戶願意用圖像填充輸入。我不是試圖通過用戶的硬盤破解我的方式 –
這個問題是相關的:http://stackoverflow.com/questions/3489133/full-path-from-file-input-using-jquery 正如你可以'沒有辦法加載圖像,例如通過''元素。實際上,正如我剛發現的,如果你甚至嘗試創建一個加載本地文件路徑的'img'元素,你將在瀏覽器的控制檯中看到錯誤'不允許加載本地資源:'。 – M1ke