Page HTML
<div> "@pic. Path"Id="img"style="width:200px;height:200px;"/> <form id="Form_photo"Method="Post"action="/n/savephoto?id=1"> <input style="Display:none"Type="file"Name="file"Id="file"accept="Image/gif,image/jpeg,image/jpg,image/png,image/svg"/> <input type="Hidden"Name="headimg"/> <input type="Button"Value="Submit"onclick="Savephoto (1)"/> </form> </div>
Js
/*=============file control when selecting a picture, preview it immediately under HTML5 =================*/function Initfile (fileId, imgid) {$ ("#"+imgid). Click (function () {$ ("#"+ FileId). Trigger ("Click"); }); document.getElementById (fileId). onchange=function (evt) {//If the browser does not support filereader, it does not process if(!window. Filereader)return; varFiles =evt.target.files; for(vari =0, f; f = files[i]; i++) { if(!f.type.match ('image.*')) { Continue; } varReader =NewFileReader (); Reader.onload=(function (thefile) {returnfunction (e) {//img Elementdocument.getElementById (imgid). src =e.target.result; }; }) (f); Reader.readasdataurl (f); }}} Initfile ("file","img");//h5 Select picture Loading
Note: because
Accept= "image/*" for the sake of using Google browser to open the image file, response to 5~6s (poor results, ie will not--second open)
After finding the information, modify it to
accept= "image/gif,image/jpeg,image/jpg,image/png,image/svg"
But it's the same (ie won't--seconds), with a brilliant request for support
There is a form form to submit files, you need to add a enctype= "multipart/form-data",
I am using AJAX to submit (this needs to refer to Jquery-form.js)
I novice small white, just write a record, thanks to guide my big.
When the file control selects a picture, preview it immediately under Html5.