2012-02-12 30 views
6

Tôi đang cố gắng sử dụng Javascript để tải lên png đến imgur. Tôi đã sử dụng mã trực tiếp từ API Imgur example, nhưng tôi không nghĩ rằng tôi đang chuyển tệp png đúng cách vì tôi nhận được thông báo lỗi cho biết file.type is undefined. Tôi nghĩ rằng tập tin là ok như tôi đã thử điều này với một vài pngs khác nhau. Mã của tôi là như sau:Tải lên png để sử dụng javascript

<html> 
<head> 
<script type="text/javascript"> 
function upload(file) { 
    // file is from a <input> tag or from Drag'n Drop 
    // Is the file an image? 
    if (!file || !file.type.match(/image.*/)) return; 

    // It is! 
    // Let's build a FormData object 
    var fd = new FormData(); 
    fd.append("image", file); // Append the file 
    fd.append("key", "mykey"); // Get your own key: http://api.imgur.com/ 

    // Create the XHR (Cross-Domain XHR FTW!!!) 
    var xhr = new XMLHttpRequest(); 
    xhr.open("POST", "http://api.imgur.com/2/upload.json"); // Boooom! 
    xhr.onload = function() { 
     // Big win! 
     // The URL of the image is: 
     JSON.parse(xhr.responseText).upload.links.imgur_page; 
    } 

    // Ok, I don't handle the errors. An exercice for the reader. 
    // And now, we send the formdata 
    xhr.send(fd); 
} 
</script> 
</head> 

<body> 

<button type="button" onclick="upload('test.png')">upload to imgur</button> 

</body> 
</html> 

Các png tập tin test.png được lưu trữ trong cùng thư mục với tập tin html của tôi.

Trả lời

2

Ví dụ bạn đang sử dụng dự kiến ​​rằng bạn sử dụng phần tử đầu vào (loại = tệp) để tải lên một số hình ảnh. Hãy thử this example. Bạn có thể truy cập dữ liệu hình ảnh bằng cách sử dụng Canvas like this.

Nói tóm lại, bạn sẽ cần phải làm điều này:

  1. Create Image mới với tập tin của bạn (cần phải được trên miền địa phương)
  2. Vẽ hình ảnh vào một Canvas tại onload
  3. Extract dữ liệu hình ảnh sử dụng this method
  4. đèo dữ liệu đó để imgur like here
+0

Cảm ơn những lời đề nghị. Để thêm hình ảnh vào canvas, đó là hình ảnh 'id'? Tôi giả sử tôi không thể tham khảo nó bằng cách sử dụng tên tập tin, dựa trên nhận xét của @ skimberk1. – djq

+0

Không có cách nào để tham khảo hình ảnh bằng tên tệp. Bạn sẽ cần tải nó vào một phần tử img và sau đó tải nội dung của nó vào một khung vẽ bằng cách sử dụng drawImage. Điều quan trọng là làm phần sau này tại bộ xử lý tải trọng của img. Nếu không nó sẽ không hoạt động. –

+0

Cảm ơn bebraw, giúp tôi hiểu luồng. Tôi đang thử nghiệm với http://html2canvas.hertzen.com/ vào lúc này; có vẻ như nó sẽ làm một phần của các bước này. – djq

3

Tệp phải là đối tượng File được tạo bằng tệp HTML5API, bạn không thể chỉ đặt tên tệp và mong muốn nó hoạt động.

Javascript không có quyền truy cập vào hệ thống tệp, nó chỉ có thể truy cập các tệp được cung cấp cho nó bằng cách kéo và thả hoặc nhập tệp.

Các vấn đề liên quan