Xem hình ảnh nhỏ trước khi Upload

Để giải quyết vấn đề này có 2 cách:

- Cách 1: Upload file ảnh  lên server (Sử dụng ajax) vào 1 thư mục tạm, sau khi quá trình submit form thành công các bạn viết mã chuyển tập tin vừa upload vào thư mục hình chính thức và xóa tập tin cũ khi đã lưu trữ quá 1 ngày trở lên. Hoặc là lưu trực tiếp lên server chấp nhận sự dư thừa dữ liệu.

- Cách 2: Sử dụng javascript để lấy hình ảnh nhỏ hiện lên trước ngay tại client mà không cần tương tác đến webserver. Cách này tương đối dễ dàng, nhanh chóng tiết kiệm tài nguyên.

Sau đây là bài viết hưỡng dẫn các bạn tạo tính năng xem ảnh nhỏ trước khi upload bằng javascript + jQuery:

Bước 1: Thêm thư viện jquery vào thẻ head trang web của bạn

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>

Bước 2: Thêm đoạn script sau đây sau script thư viện jquery

<script type="text/javascript">
  function  readURL(input,thumbimage) {
   if  (input.files && input.files[0]) { //Sử dụng  cho Firefox - chrome
   var  reader = new FileReader();
    reader.onload = function (e) {
    $("#thumbimage").attr('src', e.target.result);
    else  { // Sử dụng cho IE
      $("#thumbimage").attr('src', input.value);
    $('.Choicefile').css('background', '#C4C4C4');
    $('.Choicefile').css('cursor', 'default');
    $(".Choicefile").unbind('click'); //Xóa sự kiện  click trên nút .Choicefile
  $(document).ready(function () {
   $(".Choicefile").bind('click', function  () { //Chọn file khi .Choicefile Click
   $(".removeimg").click(function () {//Xóa hình  ảnh đang xem
      $("#thumbimage").attr('src', '').hide();
      $("#myfileupload").html('<input type="file" id="uploadfile"  onchange="readURL(this);" />');
      $(".Choicefile").bind('click', function  () {//Tạo lại sự kiện click để chọn file
      $('.Choicefile').css('cursor', 'pointer');

Bước 3: Code css

<style type="text/css">
   border:1px solid #fff;
   padding:5px 0px;
   background:  url("http://png-3.findicons.com/files/icons/2181/34al_volume_3_2_se/24/001_05.png")  repeat scroll 0 0 transparent;
   height: 24px;
   position: absolute;
   right: 5px;
   top: 5px;
   width: 24px;

Bước 4: Nội dung HTML

 <div id="myfileupload">
   <input type="file" id="uploadfile" name="ImageUpload" onchange="readURL(this);" />
   <!--      Name  mà server request về sẽ là ImageUpload-->
 <div id="thumbbox">
  <img height="100" width="100" alt="Thumb image" id="thumbimage" style="display: none" />
  <a class="removeimg" href="javascript:" ></a></div>
 <div id="boxchoice">
  <a href="javascript:" class="Choicefile">Chọn file</a>
  <p style="clear:both"></p>
  <label class="filename"></label>

Sau khi xong 4  bước trên vậy là lúc này các bạn đã có được một công cụ xem ảnh trước khi upload bằng javascript như ý muốn.

Do đây là version đầu tiên  nên có thể còn hạn chế các bạn sử dụng và đóng góp thêm ý kiến để mình phát triển thêm.

Mình  đã test qua chạy tốt trên trình duyệt IE 7-10 (6 Chưa được test), Firefox, chrome.

Các bạn có thể download code demo tại đây

Cảm ơn các bạn đã xem bài viết !

Vũ Hữu Triệu

Bình luận  

0 #23 Gracie Thứ 5-10-17 06:41
In Australia you loose marks for using 1st and 2nd person in any essay, you must change every aspect to make it 3rd person
Even in year 9 I lost marks from leaving too many points
in the 2nd person

my blog - Learn Colors
for Kids with Colors Faucet Educational Toys for Kids: http://writesuperessay.us/video/learn-colors-for-kids-with-colors-faucet-educational-toys-for-kids-best-learning-videos-for-kids-vid-GjGueULTn88
Trích dẫn
0 #22 Josephine Thứ 3-10-17 12:48
It has never been easier to choose between the transportation services, as all customer
opinions and testimonials are gathered in anyone categorize for you to pick the best.

Levant injurious calibre and as a culminate inadequate familiarity beside
consulting any rewording website reviews. Utterly written testimonials purpose manual you including the approach of
selecting the entire and only rendering checking that settle upon fit your needs.

Check out my page: http://linguagymnastics.com: http://linguagymnastics.com
Trích dẫn
0 #21 Candra Thứ 2-10-17 16:58
Businesses are erasing the boundaries between nations
and as a upshot, communication act the essential role
in expanding your reach as entrepreneur. Communication, in this be important, is the ability to convert
between any lingua franca brace there is and the transfiguration services boom has made
it calm easier. You legitimate be enduring to persuade sure the
circle you empower your transference offers fair serving, which can be verified close checking the reviews of
the special one.

Visit my site :: transcription services: http://transcriptionistforbloggers.com
Trích dẫn
0 #20 Mariel thứ 7-09-17 09:03
At 5:33, not sure if learning how to write an essay, or pick
up women. Damn James has some smooth moves!

Stop by my website; Articles: http://writesuperessay.us/video/articles-a-an-the-english-grammar-lesson-vid-Cc5i5jnqM4g
Trích dẫn
0 #19 Dorothea Thứ 6-09-17 23:50
Well if total costs haven't changed (as mentioned by
the interviewer) then the number of passengers haven't
changed as well. So the problem isn't the
number of passengers.

my website :: Can a mean P.: http://writesuperessay.us/video/can-a-mean-pe-teacher-have-lasting-negative-effects-on-a-persons-ability-to-exercise-vid-Q9BU-STDqLY
Trích dẫn
0 #18 Ronda Thứ 6-09-17 23:20
Businesses are erasing the boundaries between nations and as a fruit, communication play the essential role
in expanding your reach as entrepreneur. Communication, in this matter, is
the knack to spell out between any language brace there is and the rewrite
services increase has made it steady easier. You legitimate from to make sure-fire the flock you depute your rendition offers objective accommodation, which can be
verified close checking the reviews of the definite one.

My web page :: Localization and translation within the same language: http://pickwriters.dynadot.com/blog/2017-07-31-LOCALIZATION-AND-TRANSLATION-WITHIN-THE-SAME-LANGUAGE.html?post_id=1
Trích dẫn
0 #17 Reva Thứ 2-09-17 19:59
Unless I am really slow, I don't understand how I can I write my character's
actions, feelings, emotions to seem not flat

Feel free to surf to my webpage ... How Nokia Blew
A Big Lead in Mobile Phones: http://writesuperessay.us/video/how-nokia-blew-a-big-lead-in-mobile-phones-a-case-study-for-entrepreneurs-vid-6QpNnQdTU5k
Trích dẫn
0 #16 Kathy Thứ 2-09-17 17:49
Thank you James! I'm watching your video to learn how to write
essays for my language degree (inc. English), because if I ever learnt it
at school I had since forgotten and was struggling to get through my course!
I wish I'd watched these earlier in my degree, I could have gotten so
much higher marks. So clear and helpful, I cannot thank you enough!

Visit my webpage: A brief history of video games: http://writesuperessay.us/video/a-brief-history-of-video-games-part-i-safwat-saleem-vid-x24KoVNliMk
Trích dẫn
0 #15 Curtis Thứ 2-09-17 12:14
I started writing at the tail end of high school then when onto a Diploma of Writing and
Editing. What I learnt from the time spent in that course has made me a better author.
What I personally struggle with is spelling
and grammar, if this skill isn't up to a professional standard don't even bother sending
it into a publisher because they won't bother reading it.
I was lucky enough to have a editor from Penguin as a teacher and she said this.
This video has covered some things that I've learnt in class, listen and take note all this is on point.

Also visit my page - How to
write descriptively: http://writesuperessay.us/video/how-to-write-descriptively-nalo-hopkinson-vid-RSoRzTtwgP4
Trích dẫn
0 #14 Jerry Chủ nhật-09-17 20:09
It has conditions been easier to opt between the rewriting services, as all
customer opinions and testimonials are gathered in identical see for you
to pick the best. Escape awful calibre and as a conclude
inadequate familiarity by means of consulting any paraphrase
website reviews. Unreservedly written testimonials purpose example you by the dispose of of
selecting the one and purely transfiguration waiting that
will-power angry your needs.

Also visit my website ... Translation Trudy: http://translationtrudy.com
Trích dẫn

Thêm ý kiến

Security code
Làm mới



Thống kê truy cập

Hiện có 851 khách đang truy cập