ホームページ > 記事 > ウェブフロントエンド > 画像プレビューを実装し、アップロードしてサムネイルを生成する AJAX メソッド

画像プレビューを実装し、アップロードしてサムネイルを生成する AJAX メソッド

韦小宝オリジナル: 2017-12-30 16:25:362249ブラウズ

以下のエディターは、AJAX画像をプレビューしてアップロードし、サムネイルを生成する方法に関する記事を提供します。編集者はこれが非常に優れていると考えているので、ajax とその他のソースコードを参考として共有します。 AJAX画像プレビューの実装方法とアップロードとサムネイルの生成方法を見てみましょう

機能を実装するには、画像をアップロードするときに他のテキストがあるため、単に画像をアップロードするだけではありません。もちろん、最初に画像をアップロードし、同時に画像のサムネイルを生成します。ここでは、テキストを直接渡すことができます。複数の画像をアップロードして変更するだけです。

ネットの情報を参考に自分で書きました。新たにページを追加する必要はなく、1ページだけで大丈夫です。

JS コード:

//ajax保存数据，后台方法里实现此方法 
function SaveData() {　 
    filename = document.getElementById("idFile").value; 
    result =test_test_aspx.SaveData(filename).value; 
    if (result) { 
      alert("保存成功！");      
    } 
    return false; 
  }  
//实现预览功能 
  function DrawImage(ImgD) { 
    var preW = 118; 
    var preH = 118; 
    var image = new Image(); 
    image.src = ImgD.src; 
    if (image.width > 0 && image.height > 0) { 
      flag = true; 
      if (image.width / image.height >= preW/ preH) { 
        if (image.width > preW) { 
          ImgD.width = preW; 
          ImgD.height = (image.height * preW) / image.width; 
        } 
        else { 
          ImgD.width = image.width; 
          ImgD.height = image.height; 
        } 
        ImgD.alt = image.width + "x" + image.height; 
      } 
      else { 
        if (image.height > preH) { 
          ImgD.height = preH; 
          ImgD.width = (image.width * preH) / image.height; 
        } 
        else { 
          ImgD.width = image.width; 
          ImgD.height = image.height; 
        } 
        ImgD.alt = image.width + "x" + image.height; 
      } 
    } 
  } 
//当idFile内容改变时 
  function FileChange(Value) { 
    flag = false; 
    document.getElementById("showImg").style.display = "none";    
    document.getElementById("idImg").width = 10; 
    document.getElementById("idImg").height = 10; 
    document.getElementById("idImg").alt = ""; 
    document.getElementById("idImg").src = Value; 
  }

以下はフロントエンドコードです:

<p class="cbs"> 
<p class="l"><label>图片:</label></p> 
<p> 
  <input id="idFile" name="pic" type="file" runat="server" onchange="FileChange(this.value);" /> 
</p> 
    </p>  
    <p class="cbs"> 
<p class="l"><label>预览:</label></p> 
<p> 
  <img id="idImg" height="0" width="0" src="" alt="" onload="DrawImage(this);" /> //实现预览 
  <img id="showImg" width="118" height="118" alt="" runat="server" style="display:none"/>  //加这个主要是为了实现查看时显示图片，因为上面的（idImg）加上runat="server"　报错，如有好的方法可以留言     
</p> 
</p>

以下は AJAX メソッドです:

れーい

上記は、エディターがすべての人に提供するものです。これは、画像プレビュー、アップロード、およびサムネイル生成メソッドの AJAX 実装に関するすべての内容です。PHP 中国語 Web サイトをサポートしてください。

画像プレビューを実装し、アップロードしてサムネイルを生成する AJAX メソッド

関連記事