Question

我有一个像这样的HTML表单：

     <form id="myForm" name="myform" action="register/index.php" method="post" enctype="multipart/form-data" >

<input class="myfile" id="banner" name="banner" type="file" accept="image/png, image/gif, image/jpeg" >

<a href="#" onclick="getPreview();>Preview</a>

 <input type="submit"  value="submit" name="submit">

</form>

我想要做的是当用户点击预览按钮时，他所选择的文件将显示在<div id="myid"></div>

中的某个位置

<script>

function getPreview(){

// what should write here to make this working
}

</script>

任何人都可以帮忙，如何使用jQuery或JavaScript？

Answer 1

试试这个，可能会有所帮助，否则你可以根据你的要求定制更多

function readURL(input) {  
   $('.preview').show();
  $('#blah').hide();
  $('.preview').after('<img id="blah" src="#" alt="your image" style="display:none;"/>');
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
      $('#blah')
      .attr('src', e.target.result)
      .width(150)
      .height(200);
    };
    reader.readAsDataURL(input.files[0]);
  }
}

function getPreview(){
  $('.preview').hide();
  $('#blah').show();
}

<!DOCTYPE html>
<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
   <div>
      <input type='file' onchange="readURL(this);" />
   </div>
  <div>
  <a href="#" class="preview" onclick="getPreview();">Preview</a><br/>   
    </div>
</body>
</html>

在jQuery上传之前单击预览按钮时显示图像

1 个答案: