input被点击之后默认涌现拍照,文档等选项,可以拍照上传,也可以选图库文件上传,也可以录像进行视频上传,自己对应修正文件类型判断就可以了
这些功能无需调用cordova插件
如果须要利用插件拍照上传,利用java作为后真个,可以参考 http://bbs.wex5.com/forum.php?mod=viewthread&tid=91095
该方法是把图片base64编码成二进制流,可以存进数据库,调用的时候解码显示
利用php等其他非java作为后真个,同样可以把图片base64编码化,直接像存字符串那样存进数据库
1.构建如图
对应源码
<div class=\"大众x-panel-content\"大众 xid=\公众content1\"大众>
<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\"大众>
<input type=\"大众file\公众 name=\公众photo\公众 xid=\"大众uploadfile\"大众 bind-change=\"大众uploadfileChange\公众/>
<button xid=\"大众button1\公众 bind-click=\"大众button1Click\公众 type=\"大众submit\"大众>提交</button></form>
那里面那个action=127.0.0.1那个,改本钱身的要求地址
如果须要多文件上传,input须要类似这样构建
<input type='file' name='photo1'>
<input type='file' name='photo2'>
<input type='file' name='photo3'>
或者
<input type='file' name='photo[]'>
<input type='file' name='photo[]'>
<input type='file' name='photo[]'>
2.input绑定bind-change=\公众uploadfileChange\"大众
浸染是监控input,看注释很清楚了
Model.prototype.uploadfileChange = function(event) {
if (!event.target.files) { // 如果客户没有选择干系文件,直接返回
return;
}
var uploadimage = $(this.getElementByXid('uploadfile')); // 用jQuery拿到input标签
var file = event.target.files[0]; // 拿到用户选择的文件
if (/^image\/\w+$/.test(file.type)) { // 如果是图片文件
this.isimg = true;
} else { // 如果用户选的的不是图片文件
justep.Util.hint('请选择图片文件!
');
$uploadimage.val('');
}
};
3.上主菜
我的后端利用php做的,利用其他后真个,自行找一个对应的上传类对接就可以了
Model.prototype.button1Click = function(event) {
var form = this.getElementByXid(\"大众postForm\"大众); // 拿到form表单的js工具
var acturl = \公众http://127.0.0.1/index.php/home/index/uploadcar\"大众;
form.attributes[\"大众action\"大众].value = require.toUrl(acturl);
// 提交表单
$(form).submit(function() {
$(this).ajaxSubmit(function(resultJson) {
alert(resultJson);
});
return false; // 阻挡表单默认提交
});
};
4. require(\公众./baasd/jquery.form\"大众); 路径改本钱身的
http://pan.baidu.com/s/1eSgDluE
5.加上后端吧,thinkphp 3.2的
public function uploadcar() {
$upload = new \Think\Upload(); // 实例化上传类
$upload->maxSize = 1024 1000 10; // 设置附件上传大小
$upload->exts = array('jpg', 'gif', 'png', 'jpeg'); // 设置附件上传类型
$upload->rootPath = './upload/img_zj/'; //证件目录
$upload->savePath = ''; // 设置附件上传目录
$upload->autoSub = true;
$upload->subName = array('date', 'Y/m/d');
$upload->saveRule = date(\公众YmdHis\公众, time()) . \公众_\"大众 . mt_rand(1000, 9999); //上传名已韶光戳保存
// 上传文件
$info = $upload->upload();
if (!$info) {
//上传失落败
// 上传缺点提示缺点信息
$this->error($upload->getError());
} else {
//上传成功
$imgpath = '/upload/img_zj/' . $info['photo']['savepath'] . $info['photo']['savename'];
echo $imgpath;
}
}
我这里直接返回的便是图片地址,你可以把3里面直接改造,类似我这样写法
var xszimg = this.getElementByXid(\公众xszimg\公众);
$(form).submit(function() {
$(this).ajaxSubmit(function(resultJson) {
$(xszimg).attr(\"大众src\公众, transURL(resultJson));
$(xszimg).show();
});
return false; // 阻挡表单默认提交
});
这样直接就把图片显示出来了