[Share] Input photo Upload image method Sharing, can be single graph and multi-image

Demonstration, relatively humble, not strange, the method is simple!
Input is clicked after the default appearance of photos, documents and other options, you can take photos upload, you can also choose the library file upload, you can also record video upload, your own corresponding to modify the file type judgment can be
These features do not need to call the Cordova plugin

If you need to use plug-in photo upload, using Java as the backend, you can refer to http://bbs.wex5.com/forum.php?mod=viewthread&tid=91095
The method is to encode the image base64 into a binary stream, which can be stored in the database and decoded when the call is displayed.
Using other non-Java, such as PHP, as back-end, you can also encode the image base64, directly stored in the database as a string.

1. Build

Corresponding source code

<Divclass= "X-panel-content"XID= "Content1"><formXID= "Postform"Accept= "Image/jpeg,image/png"enctype= "Multipart/form-data"Target= "Postresultiframe"class= "Form-horizontal container-fluid"Method= "POST"Action= "http://127.0.0.1"><inputtype= "File"name= "Photo"XID= "UploadFile"Bind-change= "Uploadfilechange"/><ButtonXID= "Button1"Bind-click= "Button1Click"type= "Submit">Submit</Button></form>

That action=127.0.0.1 in there, change to his own request address.

If multiple file uploads are required, input needs to be built like this

<type  name = ' Photo1 ' > <  Typename= ' Photo2 '><type Name = ' Photo3 '> 

Or

<typename= ' photo[] '><  type  name= ' photo['><type   name= ' photo[] '>

2.input binding bind-change= "Uploadfilechange"
The function is to monitor input and see the notes clearly.

Model.prototype.uploadfileChange = function (event) {if (!event.target.files) {///If the customer does not select the relevant file, return directly;} var uploadimage = $ (This.getelementbyxid (' UploadFile ')); Use jquery to get the input tag var file = Event.target.files[0]; Get the user-selected file if (/^image\/\w+$/.test (File.type)) {///If it is a picture file This.isimg = true;} else {//If the user chooses not a picture file justep. Util.hint (' Please select the picture File! '); $uploadimage. Val (');}};

3. On the main course
My backend uses PHP to do, using the other backend, I find a corresponding upload class docking on it can be

4. Require ("./baasd/jquery.form"); Path to its own
Http://pan.baidu.com/s/1eSgDluE

5. Add the backend bar, thinkphp 3.2

Public Function Uploadcar () {$upload = new \think\upload ();//instantiation of the upload class $upload->maxsize = 1024 * 1000 * 10;//Set attachment upload size $u pload->exts = array (' jpg ', ' gif ', ' PNG ', ' jpeg '); Set attachment upload type $upload->rootpath = './upload/img_zj/'; Document Catalogue $upload->savepath = "; Set the attachment upload directory $upload->autosub = true; $upload->subname = Array (' Date ', ' y/m/d '); $upload->saverule = Date ("Ymdhis ", Time ())." _" . Mt_rand (1000, 9999); Upload name timestamp save//upload file $info = $upload->upload (), if (! $info) {//upload failed//Upload error error message $this->error ($upload->geterror ( ));} else {//upload succeeded $imgpath = '/upload/img_zj/'. $info [' photo '] [' Savepath ']. $info [' photo '] [' savename '];echo $imgpath;}

I return directly here is the picture address, you can put 3 inside the direct transformation, similar to my writing

var xszimg = This.getelementbyxid ("xszimg"); $ (form). Submit (function () {$ (this). Ajaxsubmit (function (Resultjson) {$ ( xszimg). attr ("src", Transurl (Resultjson)); $ (xszimg). Show ();}); return false; Block form default submission});

So you can just show the picture.

[Share] Input photo Upload image method Sharing, can be single graph and multi-image