input拍照上传图片方法分享，可单图与多图

jkshare

演示用，比较简陋，勿怪，方法简单！
input被点击之后默认出现拍照，文档等选项，可以拍照上传，也可以选图库文件上传，也可以录像进行视频上传，自己对应修改文件类型判断就可以了
这些功能无需调用cordova插件

如果需要使用插件拍照上传，使用java作为后端的，可以参考 http://bbs.wex5.com/forum.php?mod=viewthread&tid=91095
该方法是把图片base64编码成二进制流，可以存进数据库，调用的时候解码显示
使用php等其他非java作为后端的，同样可以把图片base64编码化，直接像存字符串那样存进数据库

1.构建如图


对应源码

1.    <div class="x-panel-content" xid="content1">
   
2.    <form xid="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">
   
3.         <input type="file" name="photo" xid="uploadfile" bind-change="uploadfileChange"/>
   
4.    <button xid="button1" bind-click="button1Click" type="submit">提交</button></form>

复制代码

那里面那个action=127.0.0.1那个，改成自己的请求地址

如果需要多文件上传，input需要类似这样构建

1.     <input type='file'  name='photo1'>
   
2.     <input type='file'  name='photo2'>
   
3.     <input type='file'  name='photo3'>

复制代码

或者

1.     <input type='file'  name='photo[]'>
   
2.     <input type='file'  name='photo[]'>
   
3.     <input type='file'  name='photo[]'>

复制代码

ntangjr

input 在高版本安卓手机上无法正确解析相册文件地址，你测试过吗

jkshare

2.input绑定bind-change="uploadfileChange"
   作用是监控input，看注释很清楚了

1.         Model.prototype.uploadfileChange = function(event) {
   
2.                 if (!event.target.files) { // 如果客户没有选择相关文件，直接返回
   
3.                         return;
   
4.                 }
   
5.                 var uploadimage = $(this.getElementByXid('uploadfile')); // 用jQuery拿到input标签
   
6. 
   
7.                  var file = event.target.files[0]; // 拿到用户选择的文件
   
8.                
   
9.                  if (/^image\/\w+$/.test(file.type)) { // 如果是图片文件
   
10.                  this.isimg = true;
    
11.                  } else { // 如果用户选的的不是图片文件
    
12.                  justep.Util.hint('请选择图片文件！');
    
13.                  $uploadimage.val('');
    
14.                  }
    
15.         };

复制代码

jkshare

3.上主菜
我的后端使用php做的，使用其他后端的，自行找一个对应的上传类对接就可以了

1.         Model.prototype.button1Click = function(event) {
   
2. 
   
3.                         var form = this.getElementByXid("postForm"); // 拿到form表单的js对象
   
4.                         var acturl = "http://127.0.0.1/index.php/home/index/uploadcar";
   
5.                         form.attributes["action"].value = require.toUrl(acturl);
   
6.                         // 提交表单
   
7.                         $(form).submit(function() {
   
8.                                 $(this).ajaxSubmit(function(resultJson) {
   
9.                                         alert(resultJson);
   
10.                                 });
    
11.                                 return false; // 阻止表单默认提交
    
12.                         });
    
13. 
    
14.         };

复制代码

jkshare

4.  require("./baasd/jquery.form");   路径改成自己的
      jquery.form.zip (12.04 KB, 下载次数: 474)

2016-6-3 10:47 上传

点击文件名下载附件

18646875825

jkshare 发表于 2016-6-3 10:44
3.上主菜
我的后端使用php做的，使用其他后端的，自行找一个对应的上传类对接就可以了

棒棒哒

jkshare

5.加上后端吧，thinkphp 3.2的

1.     public function uploadcar() {
   
2.         
   
3.         $upload = new \Think\Upload(); //  实例化上传类
   
4.         $upload->maxSize = 1024 * 1000 * 10; //  设置附件上传大小
   
5.         $upload->exts = array('jpg', 'gif', 'png', 'jpeg'); //  设置附件上传类型
   
6.         $upload->rootPath = './upload/img_zj/'; //证件目录
   
7.         $upload->savePath = ''; //  设置附件上传目录
   
8.         $upload->autoSub = true;
   
9.         $upload->subName = array('date', 'Y/m/d');
   
10.         $upload->saveRule = date("YmdHis", time()) . "_" . mt_rand(1000, 9999); //上传名已时间戳保存
    
11.         //  上传文件
    
12.         $info = $upload->upload();
    
13.         if (!$info) {
    
14.             //上传失败
    
15.             
    
16.             //  上传错误提示错误信息
    
17.             $this->error($upload->getError());
    
18.         } else {
    
19.             //上传成功
    
20.             $imgpath = '/upload/img_zj/' . $info['photo']['savepath'] . $info['photo']['savename'];
    
21.             echo $imgpath;
    
22.         }
    
23.     }

复制代码

我这里直接返回的就是图片地址，你可以把3里面直接改造，类似我这样写法

1. var xszimg = this.getElementByXid("xszimg");
   
2. $(form).submit(function() {
   
3.                                 $(this).ajaxSubmit(function(resultJson) {
   
4.                                         $(xszimg).attr("src", transURL(resultJson));
   
5.                                         $(xszimg).show();
   
6.                                 });
   
7.                                 return false; // 阻止表单默认提交
   
8.                         });

复制代码

这样直接就把图片显示出来了

负暄

好帖，佩服！

970145

970145

能否把整个程序上传上来，作为一个DEMO运行的？

kevinxin123

这种方式也是一次只能选择一个文件或者图片吧，不是一次选择多张图啊