在IE和Chrome上传之前的图片预览 [英] Image preview before upload in IE and Chrome

问题描述

我试图设计一个模块，我希望在将图像上载到数据库之前向用户显示图像预览。

我有发现了一个适用于Firefox的解决方案，但不适用于IE和Chrome ...有人可以帮我解决问题。

这是我的代码： -

  function imageURL（input）{
 if（input.files&& input.files [0]）{
 var reader = new FileReader（）; 
 
 reader.onload = function（e）{
 $（'＃replaceMe'）。attr（'src'，e.target.result）
 .width（100） 
 .height（100）; 
} 
 
 reader.readAsDataURL（input.files [0]）; 
 
 
 $ / code $ / pre 
 
 
我在调用change函数的这个函数文件输入控制： -  
 
 
 < input type =fileclass =fileonchange =imageURL（this） /> 
  
我也试过这个 url 步骤，但它不适用于IE7和8以及Chrome。    h2_lin>解决方案

没有跨平台的方法可以仅使用HTML / JavaScript来完成此操作。然而，使用非常基本的程序化方法是可能的：



第1步：绑定到模糊

绑定a blur事件到您的文件输入字段，如下所示：

  $（＃input_field）。blur（function ）{
 alert（Blur！）; 
}）; 
  

第2步：服务器端缩略图

您将不得不在服务器端应用程序上编写一个小型应用程序/路径，该应用程序只接受输入文件中包含的表单，并生成一个临时输出文件。您甚至可以暂时将filedata存储在数据库中，而不是将单个文件写入磁盘;实施取决于你。当此路由收到请求时，它应缩略图，然后返回缩略图的路径



第3步：AJAX

首先，选择很多可用的jQueryAJAX上传库，以使包含文件的表单通过AJAX上传。将该库应用于表单（以下示例中，我将使用 ajaxForm 。 ），然后修改你的模糊：



  // AJAX形式
 $（＃your_form）。ajaxForm （{
 success：function（response）{
 //将您返回的缩略图插入到您的DOM。
} 
}）; 
 
 //修改模糊
 $（＃input_field）。blur（function（event）{
 $（＃input_field）。closest（form） .submit（）; 
}）; 
  

问题：

上面的方法。制作表单AJAX将意味着定期提交它将会中断 - 更不用说缩略图路径将与实际的表单提交路径不同。使用一些解决方法（例如，有一个辅助隐藏表单，并且blur事件将文件上传复制到它上面，然后提交它）。

I am trying to design a module in which I would like to show a preview of the image to the user before he uploads the image to database.

I have found a solution which works for Firefox but is not working for IE and Chrome...Can someone help me out.

Here is my code:-

     function imageURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function(e) {
                $('#replaceMe').attr('src', e.target.result)
                 .width(100)
                 .height(100);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

And I am calling this function on change event of the file input control:-

<input type="file" class="file" onchange="imageURL(this)" />

And also I have tried this url steps but it doesnt work for IE7 and 8 and Chrome.

解决方案

There is no cross platform way to accomplish this using only HTML/JavaScript. It is possible, however, using a very basic programmatic approach:

Step 1: Binding to Blur
Bind a "blur" event to your file input field, like so:

$("#input_field").blur(function(event){
    alert("Blur!");
});

Step 2: Server-Side Thumbnailing
You're going to have to write a small application/route on your server side application that simply accepts a form that contains in input file, and generates a temporary output file. You could even just temporarily store the filedata in your database, rather than write individual files to disk; the implementation is up to you. When this route receives a request, it should thumbnail the image, and then return a path to that thumbnail

Step 3: AJAX
First, choose one of the many available jQuery "AJAX Upload" libraries to make the form that contains your file upload it via AJAX. Apply that library to the form(For the examples below, I'll use ajaxForm.), and then modify your blur:

// AJAX the form
$("#your_form").ajaxForm({
    success: function(response){
        // Insert your returned thumbnail into your DOM.
    }
});

// Modify the blur
$("#input_field").blur(function(event){
    $("#input_field").closest("form").submit();
});

Issues:
There will be issues with the approach above. Making your form AJAX will mean submitting it regularly will break - not to mention that the thumbnail route will be different than the actual form submission route. Use some workarounds (for example, have a secondary hidden form, and the blur event copies the file-upload onto it, and then submits it).

这篇关于在IE和Chrome上传之前的图片预览的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！