js实现获取手机相册并上传

转载请标记出处http://blog.csdn.net/qq_32635069/article/details/72869100

我将代码总结写成了一个Demo,没有看懂的可以从github上下载来,看一下 Demo地址
在写易沃克项目时,一直苦于无路去实现将图片上传至服务器
这是我的解决方案
当初有很多人说使用form方法将文件封装来上传,可是因为要照顾到从相机中选择图片,所以一直没有去做。
后来看到了Uploader的方法来传文件,感觉自己找到了
他是使用plus.uploader来完成的

创建网络上传任务

function createUploader() {
   
    task = plus.uploader.createUpload(url, {
        method: 'POST'
    }, function(data, status) {
   
        if(status == 200) {
            plus.nativeUI.closeWaiting();
            var page = plus.webview.getWebviewById('view/dynamics/dynamics.html');
            mui.fire(page, 'refresh', {});
            mui.openWindow({
                id: 'index.html'
            });
        } else {
            mui.alert(status);
        }
    });

}

相机拍照并获取到图片


  • 6
    点赞
  • 43
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
### 回答1: 要使用JavaScript实现打开手机相册选择图片,可以使用HTML5的File API结合input元素的type属性为file来实现。 首先,在HTML中,创建一个input元素,并将其type属性设置为file,同时为其添加一个id属性,以便在JavaScript中进行操作。例如: ```html <input type="file" id="photoInput" accept="image/*"> ``` 然后,在JavaScript中,获取到这个input元素,并为其绑定change事件。当用户选择图片后,change事件会被触发,我们可以在事件处理函数中获取到用户选择的图片文件并进行后续操作。例如: ```javascript document.getElementById('photoInput').addEventListener('change', function(e) { var file = e.target.files[0]; // 获取到用户选择的图片文件 // 进行后续操作,比如显示图片、上传等 }); ``` 在这个事件处理函数中,可以通过e.target.files[0]获取到用户选择的文件。如果用户选择了多个文件,可以通过循环遍历来处理每个文件。 接下来,你可以根据具体需求,在事件处理函数中实现对选中图片的操作,比如显示图片预览、上传图片等。 需要注意的是,使用上述方法只能获取到用户选择的图片文件,若要将其显示在页面上,需要使用其他技术,如HTML5的canvas或使用第三方库等。 使用上述方法,就可以实现通过JavaScript打开手机相册选择图片的功能。 ### 回答2: 在JavaScript中,可以通过File API和input元素结合实现打开手机相册选择图片。 首先,需要在HTML中创建一个input元素,并设置type为file,用于选择文件: ```html <input type="file" id="imageInput" accept="image/*" style="display: none;" /> ``` 接下来,需要添加一个按钮或者其他触发事件的元素来触发选择文件的操作: ```html <button id="openAlbum">打开相册</button> ``` 然后,在JavaScript获取这些元素,并添加触发事件的逻辑: ```javascript const imageInput = document.getElementById('imageInput'); const openAlbumBtn = document.getElementById('openAlbum'); openAlbumBtn.addEventListener('click', function() { // 触发选择文件的操作 imageInput.click(); }); ``` 最后,监听input元素的change事件,通过File API获取选择的图片文件: ```javascript imageInput.addEventListener('change', function() { const file = imageInput.files[0]; // 使用file对象进行后续操作,例如上传到服务器或者显示在页面中 console.log(file); }); ``` 这样,当用户点击按钮时,就会弹出选择图片的界面,用户选择图片后,可以通过file对象进行进一步的操作。请注意,由于安全性限制,该功能在某些移动端浏览器中会受到限制或者无法使用,因此在实际应用中可能需要使用相关的插件或者框架来实现

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值