使用image元素也可以進行表單的提交

來源:互聯網
上載者:User

看下面的一段代碼,剛開始沒有弄明白原理,因為發現下面的form表單,沒有我們平時說的input type="submit"這樣的提交按鈕,也沒有javascript中談到的form.submit綁定在某個點擊事件上面,於是卡殼了。但是的確通過圖片的提交按鈕,的確是可以對該form表單進行提交,莫非....
img也可以對錶單進行提交:

<form name="uploadForm" enctype="multipart/form-data" method="post" action="/ajax/designer_handler.php?item_id=<?=$item_id?>&tab=<?=$side?>&is_admin=<?=$is_admin?>" onsubmit="return uploadPhoto();"  style="display:inline"><input type="hidden" name="MAX_FILE_SIZE" value="25000000" style="display:inline;"><input type="hidden" name="uploading" /><?php $u_agent = $_SERVER['HTTP_USER_AGENT']; $btnText = "Browse";if(preg_match('/Chrome/i',$u_agent) || preg_match('/Safari/i',$u_agent)){$btnText = "Choose File";}$fonts_image_path = FontsImage::getImageUrl($design_id, $side);//var_dump($fonts_image_path);?>Upload up to 5 files at once<br />Click the <?= $btnText?> buttons to select files on your computer:<br /><br /><table cellspacing="5"><tr><td height="25">Photo: <input type="file" id="pathname1" name="pathname1" style="width:300px;" accept="image/jpeg" > </td></tr><tr><td height="25">Photo: <input type="file" id="pathname2" name="pathname2" style="width:300px;" accept="image/jpeg" > </td></tr><tr><td height="25">Photo: <input type="file" id="pathname3" name="pathname3" style="width:300px;" accept="image/jpeg" > </td></tr><tr><td height="25">Photo: <input type="file" id="pathname4" name="pathname4" style="width:300px;" accept="image/jpeg" > </td></tr><tr><td height="25">Photo: <input type="file" id="pathname5" name="pathname5" style="width:300px;" accept="image/jpeg" > </td></tr></table><br /><input id="upload_button" type="image" src="/images/personalize/upload.gif" >      <img id="upload_button_waiting" src="/images/ajax-loader.gif" style="display:none;" /><br /><span id="upload_message" style="font-style:italic; color:gray; visibility:hidden">Uploading...  (Large pictures may take some time to upload)</span><br /><br /></form>

原來:

表單控制項(Form Control):圖片提交(input type="image")

input type=image 相當於 input type=submit,不同的是,input type=image 以一個圖片作為表單的提交按鈕,其中 src 屬性工作表示圖片的路徑。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.