jqueryは画像upload_jqueryの前にローカルプレビュー機能を実装します-jsチュートリアル-php.cn

jqueryは画像upload_jqueryの前にローカルプレビュー機能を実装します

WBOY

リリース： 2016-05-16 09:00:05

オリジナル

2162 人が閲覧しました

この記事の例では、参考のためにアップロードする前に画像をプレビューするための jquery の特定のコードを共有します。具体的な内容は次のとおりです。
導入前にちょっとした問題がありますが、画像プレビューが見つからない場合、画像が出ない原因は画像のパスにあることが判明しました！！！私が書き続けているのは画像のローカルパスですが、これは役に立ちません。コードに直接移動します。

html 部分:

コードをコピーコードは次のとおりです。

jqueryは画像upload_jqueryの前にローカルプレビュー機能を実装します

input:file イベントはアップロードタイプです。
より一般的に使用される属性値は次のとおりです。
accept: は、選択できるファイルの mime タイプを示します。複数の mime タイプは英語のカンマで区切られます。一般的に使用される mime タイプは次のとおりです。下の表。
すべての画像形式をサポートするには、* と書くだけです。
multiple:複数のファイルを選択できるかどうか。複数のファイルがある場合、値は最初のファイルの仮想パスになります。

input:file のスタイルは変更されないため、スタイルを変更したい場合は、まず非表示にしてください。表示:なし;

css 部分:
円形のアバターを作成しているので、最初にピクチャースタイルを定義します。

 #pic{
      width:100px;
      height:100px;
      border-radius:50% ;
      margin:20px auto;
      cursor: pointer;
    }

ログイン後にコピー

jquery 部分:

 $(function() {
   $("#pic").click(function () {
     $("#upload").click();               //隐藏了input:file样式后，点击头像就可以本地上传
      $("#upload").on("change",function(){
        var objUrl = getObjectURL(this.files[0]) ;  //获取图片的路径，该路径不是图片在本地的路径
        if (objUrl) {
          $("#pic").attr("src", objUrl) ;      //将图片路径存入src中，显示出图片
        }
     });
   });
 });

 //建立一個可存取到該file的url
 function getObjectURL(file) {
   var url = null ;
   if (window.createObjectURL!=undefined) { // basic
     url = window.createObjectURL(file) ;
   } else if (window.URL!=undefined) { // mozilla(firefox)
     url = window.URL.createObjectURL(file) ;
   } else if (window.webkitURL!=undefined) { // webkit or chrome
     url = window.webkitURL.createObjectURL(file) ;
   }
   return url ;
 }

ログイン後にコピー

実行結果は次のとおりです。