blocks|key|113201|text|试试这个：(用于预览)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|113202|<script+type="text/javascript">
++++function+readURL(input)+{
++++++++if+(input.files+&&+input.files[0])+{
++++++++++++var+reader+=+new+FileReader();

++++++++++++reader.onload+=+function+(e)+{
++++++++++++++++$('#blah').attr('src',+e.target.result);
++++++++++++}

++++++++++++reader.readAsDataURL(input.files[0]);
++++++++}
++++}
</script>

<body>
++++<form+id="form1"+runat="server">
++++++++<input+type="file"+onchange="readURL(this);"+/>
++++++++<img+id="blah"+src="#"+alt="your+image"+/>
++++</form>
</body>|code-block|syntax|javascript|113203|工作演示here>|offset|length|113204|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/uboqu3/1/edit^0|0|0|4|5|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Try this: (For Preview)</p>

<pre><code>&lt;script type="text/javascript"&gt;
    function readURL(input) {
        if (input.files &amp;&amp; input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }
&lt;/script&gt;

&lt;body&gt;
    &lt;form id="form1" runat="server"&gt;
        &lt;input type="file" onchange="readURL(this);" /&gt;
        &lt;img id="blah" src="#" alt="your image" /&gt;
    &lt;/form&gt;
&lt;/body&gt;
</code></pre>

<p>Working Demo <a href="http://jsbin.com/uboqu3/1/edit" rel="noreferrer">here></a></p>


blocks|key|113208|text|++++++++++++++++++++#######################
++++++++++++++++++++###++the+img+page+++###
++++++++++++++++++++#######################


<script+src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script+src="https://malsup.github.com/jquery.form.js"></script>
<script+type="text/javascript">
++++$(document).ready(function(){
++++++++$('#f').live('change'+,function(){
++++++++++++$('#fo').ajaxForm({target:+'#d'}).submit();
++++++++});
++++});
</script>
<form+id="fo"+name="fo"+action="nextimg.php"+enctype="multipart/form-data"+method="post">
++++<input+type="file"+name="f"+id="f"+value="start+upload"+/>
++++<input+type="submit"+name="sub"+value="upload"+/>
</form>
<div+id="d"></div>


++++++++++++++++++++#############################
++++++++++++++++++++###++++the+nextimg+page+++###
++++++++++++++++++++#############################


<?php
+++++$name=$_FILES['f']['name'];
+++++$tmp=$_FILES['f']['tmp_name'];
+++++$new=time().$name;
+++++$new="upload/".$new;
+++++move_uploaded_file($tmp,$new);
+++++if($_FILES['f']['error']==0)
+++++{
?>
+++++<h1>PREVIEW</h1><br+/><img+src="<?php+echo+$new;?>"+width="100"+height="100"+/>
<?php
+++++}
?>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|113209|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>                    #######################
                    ###  the img page   ###
                    #######################


&lt;script src="https://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
&lt;script src="https://malsup.github.com/jquery.form.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
    $(document).ready(function(){
        $('#f').live('change' ,function(){
            $('#fo').ajaxForm({target: '#d'}).submit();
        });
    });
&lt;/script&gt;
&lt;form id="fo" name="fo" action="nextimg.php" enctype="multipart/form-data" method="post"&gt;
    &lt;input type="file" name="f" id="f" value="start upload" /&gt;
    &lt;input type="submit" name="sub" value="upload" /&gt;
&lt;/form&gt;
&lt;div id="d"&gt;&lt;/div&gt;


                    #############################
                    ###    the nextimg page   ###
                    #############################


&lt;?php
     $name=$_FILES['f']['name'];
     $tmp=$_FILES['f']['tmp_name'];
     $new=time().$name;
     $new="upload/".$new;
     move_uploaded_file($tmp,$new);
     if($_FILES['f']['error']==0)
     {
?&gt;
     &lt;h1&gt;PREVIEW&lt;/h1&gt;&lt;br /&gt;&lt;img src="&lt;?php echo $new;?&gt;" width="100" height="100" /&gt;
&lt;?php
     }
?&gt;
</code></pre>


blocks|key|113211|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|113212|function+readURL(input)+{
++if+(input.files+&&+input.files[0])+{
++++var+reader+=+new+FileReader();

++++reader.onload+=+function(e)+{
++++++$('#ImdID').attr('src',+e.target.result);
++++};

++++reader.readAsDataURL(input.files[0]);
++}
}|code-block|syntax|javascript|113213|img+{
++max-width:+180px;
}|113214|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input+type='file'+onchange="readURL(this);"+/>
<img+id="ImdID"+src=""+alt="Image"+/>|113215|113216|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|K|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function readURL(input) {
  if (input.files &amp;&amp; input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#ImdID').attr('src', e.target.result);
    };

    reader.readAsDataURL(input.files[0]);
  }
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>img {
  max-width: 180px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;input type='file' onchange="readURL(this);" /&gt;
&lt;img id="ImdID" src="" alt="Image" /&gt;</code></pre>
</div>
</div>
</p>


<p>I am going to preview an image or photo in a form, but it doesn't work and the HTML code looks like this as below:</p>

<pre><code>&lt;form action="" method="post" enctype="multipart/form-data" name="personal_image" id="newHotnessForm"&gt;
    &lt;p&gt;&lt;label for="image"&gt;Upload Image:&lt;/label&gt;
    &lt;input type="file" id="imageUpload"/&gt;&lt;/p&gt;
    &lt;p&gt;&lt;button type="submit" class="button"&gt;Save&lt;/button&gt;&lt;/p&gt;
        &lt;div id="preview"&gt;
            &lt;img width="160px" height="120px" src="profile pic.jpg" id="thumb" /&gt;
        &lt;/div&gt;
    &lt;/form&gt;
</code></pre>

<p>and incorporated JS code/script below:</p>

<pre><code>&lt;script type="text/jaavascript"&gt;
$(document).ready(function(){
    var thumb=$('#thumb');
    new AjaxUpload('imageUpload',{
    action:$('newHotnessForm').attr('action'),
    name:'image',
    onSubmit:function(file,extension){
        $('#preview').addClass('loading');
    },
    onComplete:function(file,response){
        thumb.load(function(){
            $('#preview').removeClass('loading');
            thumb.unbind();
        });
        thumb.attr('src',response);
    }
    });
});
</code></pre>

<p></p>

<p>There are 2 main questions on my form:<br>
1. Why doesn't the preview of the image or picture work?
<br>2. How to paste the photo from the form when the save button is clicked, it will go/link to another PHP or PHP page that I created?</p>


How to preview an image before and after upload?

我打算在表单中预览图像或照片，但它不起作用，HTML代码如下所示：<form action="" method="post" enctype="multipart/form-data" name="personal_image" id="newHotnessForm">    <p><label for="image"...

问如何在上传前后预览图片？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在上传前后预览图片？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在上传前后预览图片？
EN