Я собираюсь просмотреть изображение или фотографию в форме, но это не сработает, и код HTML выглядит следующим образом:
<form action="" method="post" enctype="multipart/form-data" name="personal_image" id="newHotnessForm"> <p><label for="image">Upload Image:</label> <input type="file" id="imageUpload"/></p> <p><button type="submit" class="button">Save</button></p> <div id="preview"> <img width="160px" height="120px" src="profile pic.jpg" id="thumb" /> </div> </form> и включил JS-код / скрипт ниже:
<script type="text/jaavascript"> $(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); } }); });
В моей форме есть два основных вопроса:
1. Почему не просматривается предварительный просмотр изображения или изображения?
2.Как вставить фотографию из формы при нажатии кнопки сохранения, она будет идти / ссылаться на другую страницу php или php, которую я создал?
Попробуйте следующее: (для предварительного просмотра)
<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>
Демо-версия здесь>
Ответ meVeekay был хорошим, и я просто делаю его более импровизированным, делая 2 вещи.
Проверьте, поддерживает ли браузер HTML5 FileReader () или нет.
Разрешить загрузку только файла изображения, проверяя его расширение.
HTML:
<div id="wrapper"> <input id="fileUpload" type="file" /> <br /> <div id="image-holder"></div> </div>
jQuery:
$("#fileUpload").on('change', function () { var imgPath = $(this)[0].value; var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase(); if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") { if (typeof (FileReader) != "undefined") { var image_holder = $("#image-holder"); image_holder.empty(); var reader = new FileReader(); reader.onload = function (e) { $("<img />", { "src": e.target.result, "class": "thumb-image" }).appendTo(image_holder); } image_holder.show(); reader.readAsDataURL($(this)[0].files[0]); } else { alert("This browser does not support FileReader."); } } else { alert("Pls select only images"); } });
Для детального понимания FileReader ()
Проверьте эту статью: использование предварительного просмотра изображения FileReader () перед загрузкой.
####################### ### the img page ### ####################### <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://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 } ?>