jQueryで実装したアップロード画像のローカルプレビュー効果の簡単な例-jsチュートリアル-php.cn

jQueryで実装したアップロード画像のローカルプレビュー効果の簡単な例

亚连

リリース： 2018-05-28 14:23:50

オリジナル

1169 人が閲覧しました

この記事では、jQuery によって実装されたアップロードされた画像のローカルプレビュー効果を主に紹介し、jQuery でアップロードされた画像のローカルプレビューに関連する関連ページ要素属性の動的操作実装テクニックを例の形式で分析します。

この記事では、jQuery によって実装された、アップロードされた画像のローカルプレビュー効果の例について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>www.jb51.net jquery上传图片本地预览效果</title>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<input id="upload" type="file">
<img id="preview" src="">
<script type="text/javascript">
$(&#39;#upload&#39;).change(function(){
  // 获取FileList的第一个元素
  alert(document.getElementById(&#39;upload&#39;).files[0]);
  var f = document.getElementById(&#39;upload&#39;).files[0];
  src = window.URL.createObjectURL(f);
  document.getElementById(&#39;preview&#39;).src = src
})
</script>
</body>
</html>

ログイン後にコピー

操作効果: