1. The first method:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.min.js"> </script><!--根据路径自行引入-->
<style>
#filed{
width:100%;
height:50px;
border: 1px solid #ccc;
}
.imgs{
width: 100px;
}
</style>
</head>
<body>
<!-- <input type="file" The above mentioned id = " Filed " the Accept = " Image / * " Capture = " Camera " /> <-! // direct call camera to take pictures ->
<the INPUT of the type = " File " the above mentioned id = " Filed " />
<img src = "" alt = "" class = " imgs " >
</ body>
<Script> // trigger events when the input file content changes of
$ ( ' #filed ' ).
change(function(){
//
An array of files to obtain input file documents;
// $ ( '# Filed') is obtained jQuery object, .get (0) into native objects;
// here only choose a default, but is still stored in the form of an array, so take the first element uses [0];
var file = $ ( ' #filed ' ). GET ( 0 ) .files [ 0 ];
// create an object used to read this file to run it
// you want Image what is not there yet and then submit the information printed in formdata you can also mobilize to take pictures with the gallery on the phone
// Alert (file.name)
// Alert (File)
console.log (window.URL.createObjectURL (File))
var imgUrl = window.URL.createObjectURL (File)
$ ( " .imgs ").attr("src",imgURl)
})
</script>
</html>
2. This method is the same as above, but the above is not compatible with Firefox Firefox compatible
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="ge_pic_icon_Infor"></div>
<div class="Infor_file">
<input type="file" name="uploadPicture" id="file"value = "" title = " upload images " Accept = " Image / * " Capture = " Camera " onChange = " GetPhoto (the this) " />
</ div>
</ body>
<Script>
function GetPhoto (Node) {
var = imgUrl "" ; // first global variable declarations following a function which determines whether performing the above will change this brother variable
var File = null ;
the try { // If successful execution through
var File = null ;
IF(node.files && node.files [ 0 ]) {
file = node.files [ 0 ]; // This file is a picture of a variety of information,
// Alert (file)
} the else IF (node.files && node.files .Item ( 0 )) {
file = node.files.item ( 0 ); // this is the file various information picture,
}
// Firefox because of safety issues has been unable to obtain full directly by input [file] .value file path
the try { // above that determine the successful implementation // this is for Firefox Firefox because of the changes this year will not work that way in accordance with the above, some time ago I have been a pit
imgURL = file.getAsDataURL ();// This is executed if Firefox on top of that also change variables
} the catch (E) { // The above determination that the unsuccessful execution
imgRUL = window.URL.createObjectURL (File); // this If the implementation will change the variables at the top of the Firefox browser
// imgRUL this is an example of the picture becomes a parameter path, img src Lane is filling this path
}
} the catch (E) { // unsuccessful performing
IF (node.files && node.files [ 0 ]) {
var Reader = new new the FileReader ();
reader.onload = function (E) {
imgUrl = e.target.result;
};
Reader.readAsDataURL (node.files [ 0 ]);
}
}
creatImg (imgRUL);
return imgUrl;
/// launched fromdata biography written in this picture. Sends file almost understand it? .
}
Function creatImg (imgRUL) { // picture shows
// $ (. "Imgs"). Attr ( "the src", imgRUL)
var textHtml = " <IMG the src = ' " + imgRUL + " ' width = '300px by' height = '450px' /> " ;
$ ( " .ge_pic_icon_Infor " ) .html (textHtml);