open the file upload dialogue box onclick the image

Question

I want to open  the image upload file dialogue box if i click the button tag is it possible if so how can i do it in php  while      echo   lt td gt  lt button gt  lt img src     cfet  productimage      width  50  height  40  gt  lt  button gt  lt  td gt

User · Answer

you can show the file selection dialog with a onclick function  and if a file is choosen  onchange event  then send the form to upload the file    lt form id  foto  method  post  action  upload  method  POST   enctype  multipart form-data   gt     lt div style  height 0px overflow hidden  gt      lt input type  file  id  fileInput  name  fileInput  onchange  this form submit     gt      lt  div gt      lt i class  fa fa-camera  onclick  fileInput click     gt  lt  i gt   lt  form gt

User · Answer

you need to add a little hack to achieve this   You can hide a file upload input type file  behind your button   and onclick of your button you can trigger your file upload click   It will open a file upload window on click of button   lt button id  btnfile  gt     lt img src     cfet  productimage      width  50  height  40  gt   lt  button gt    lt div class  wrapper  gt    set wrapper  display hidden        lt input type  file  id  uploadfile    gt    lt  div gt    and some javascript      btnfile   click function              uploadfile   click          here is a fiddle for this example  http   jsfiddle net ravi441988 QmyHV 1 embedded result

User · Answer

lt  -- File input  hidden  -- gt   lt input type  quot file quot  id  quot file1 quot  style  quot display none quot   gt        lt  -- Trigger button -- gt   lt a href  quot javascript void 0  quot  onClick  quot openSelect   file1   quot  gt    lt script type  quot text javascript quot  gt                              function openSelect file        file  trigger  click       lt  script gt

User · Answer

lt label for  profileImage  gt      lt a style  cursor  pointer   gt  lt em class  fa fa-upload  gt  lt  em gt  Change Profile    Image lt  a gt  lt  label gt      lt input type  file  name  profileImage  id  profileImage  style  display  none   gt

User · Answer

Include input type  file  element on your HTML page and on the click event of your button trigger the click event of input type file element using trigger function of jQuery  The code will look like     lt input type  file  id  imgupload  style  display none   gt    lt button id  OpenImgUpload  gt Image Upload lt  button gt    And on the button s click event write the jQuery code like        OpenImgUpload   click function        imgupload   trigger  click          This will open File Upload Dialog box on your button click event

User · Answer

HTML Code     lt form method  post  action     id     gt   lt div class  form-group files color  gt       lt input type  file  class  form-control  multiple    gt   lt  div gt      CSS    files input   outline  2px dashed  92b0b3  outline-offset  -10px  -webkit-transition  outline-offset  15s ease-in-out  background-color  15s linear  transition  outline-offset  15s ease-in-out  background-color  15s linear  padding  120px 0px 85px 35   text-align  center  important  margin  0  width  100   important  height  400px        files input focus          outline  2px dashed  92b0b3       outline-offset  -10px     -webkit-transition  outline-offset  15s ease-in-out  background-color  15s linear      transition  outline-offset  15s ease-in-out  background-color  15s linear    border 1px solid  92b0b3        files  position relative      files after    pointer-events  none       position  absolute       top  60px       left  0      width  50px     right  0     height  400px    content        background-image  url        images       display  block    margin  0 auto    background-size  100     background-repeat  no-repeat        color input  background-color  f1f1f1    files before     position  absolute    bottom  10px     left  0   pointer-events  none    width  100     right  0    height  400px    display  block    margin  0 auto    color   2ea591    font-weight  600    text-transform  capitalize    text-align  center

User · Answer

lt input type  file  id  imgupload  style  display none   gt   lt label for  imgupload  gt   lt button id  OpenImgUpload  gt Image Upload lt  button gt  lt  label gt    On click of for  attribute will automatically focus on  file input  and upload dialog box will open

User · Answer

lt button id  OpenImgUpload  onclick      imgupload   trigger  click     gt Image Upload lt  button gt   lt input type  file  id  imgupload  style  display none   gt

User · Answer

Also  You can write all inline  direct at html code    lt input type  file  id  imgupload  gt   lt a href     onclick      imgupload   trigger  click    return false   gt Upload file lt  a gt       return false  - will be useful to decline anchor action after link was clicked

[javascript] open the file upload dialogue box onclick the image

Examples related to javascript

Examples related to php

Examples related to html