js读取手机相册（根据微信jssdk的localid获取照片）

本文目录

• 根据微信jssdk的localid获取照片
• 使用angularJs怎样调用手机相机和相册
• 当点击带+的图片时，弹出手机相册，可以选择手机相册内的图片上传，代码如何写怎么实现
• html5 获取手机摄像头与相册问题
• autojs获取相册所有文件夹

根据微信jssdk的localid获取照片

            $("#xiangji").click(function () {               
                wx.chooseImage({
                    count: 1, // 默认9
                    sizeType: , // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: , // 可以指定来源是相册还是相机，默认二者都有
                    success: function (res) {
                        var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                        $(".vip-tx").find("img").attr("src", localIds);
                        wx.uploadImage({
                            localId: localIds.toString(), // 需要上传的图片的本地ID，由chooseImage接口获得
                            isShowProgressTips: 1, // 默认为1，显示进度提示
                            success: function (res) {
                                var serverId = res.serverId; // 返回图片的服务器端ID
                                wx.downloadImage({
                                    serverId: serverId.toString(), // 需要下载的图片的服务器端ID，由uploadImage接口获得
                                    isShowProgressTips: 1, // 默认为1，显示进度提示
                                    success: function (res) {
                                        var downloadId = res.localId; // 返回图片下载后的本地ID
                                        alert(downloadId);
                                    }
                                });
                            }
                        });
                       
                    }
                });
            });

使用angularJs怎样调用手机相机和相册

AngularJS 没有相机插件，cordova。phonegap才有相机插件。
首先用命令：
phonegap plugin add org.apache.cordova.camera
安装相机插件
然后再用
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.FILE_URI
});
进行访问。
记得一定要在onDeviceReady() 之后调用

当点击带+的图片时，弹出手机相册，可以选择手机相册内的图片上传，代码如何写怎么实现

首先需要引用 js 和css

 《!--上传控件--》
2     《script src="query.form.min.js"》《/script》
3     《link href="Img_List.css" rel="stylesheet" /》
4     《script src="Img_List.js"》《/script》

Img_List.js 如下：

/// 《reference path="../../script/jquery-1.8.0.min.js" /》
//显示
function imgshow(obj) {
    //$(obj).find("a").show();
}
//隐藏
function imghide(obj) {
    //$(obj).find("a").hide();
}
//上传
function upload() { 
    $("#FileLoad").click();
}
//删除
function imgdel(listId, FileId, hfId) {
    
    $.post("/CommonModule/ashx/public.ashx?action=DelMessageImg&Files=" + $("#" + hfId).val(), function (result) {
        if (result != "ok")
            $.messager.alert("消息提示", "删除失败!");
     });
    var html = "《li》《img src=\"/Themes/Images/jia.jpg\" style=\"height: 80px; width: 80px;\" /》《input type=\"file\" id=\""+FileId+"\" class=\"input\" onchange=\"ImgUpload(’"+FileId+"’,’"+hfId+"’,’"+listId+"’);\" name=\""+FileId+"\" /》《/li》"
    $("#"+listId).html(html);
}
//添加成功
function imgaddhtml(data, code,listId,fileId,hfId) {
    var list = data.split(’,’);
    var html = "《li onmouseover=\"imgshow(this)\" onmouseout=\"imghide(this);\"》";
    html += "《a style=\"height:80px;width:80px;\" href=\"" + list + "\" code=\"" + code + "\" /》《/a》《span  onclick=\"imgdel(’"+listId+"’,’"+fileId+"’,’"+hfId+"’)\"》《/span》《/li》";
    $("#" + listId).html(html);
}
//图片文件上传
//uppath 上传空间id 
//上传成功存放的图片路径的隐藏域id
//listId 显示图片的区域id
function ImgUpload(uppath, hndimg,listId) {
    var sendUrl = "/CommonModule/ashx/Upload_Ajax.ashx?action=SingleFile&IsThumbnail=1&UpFilePath=" + uppath;
    //开始提交
    $("#form1").ajaxSubmit({
        beforeSubmit: function (formData, jqForm, options) {
            //alert(1);
        },
        success: function (data, textStatus) {
            var list = $("#" + hndimg).val();
            $("#" + hndimg).val(data.msgbox);
            imgaddhtml(data.msgbox, 0,listId,uppath,hndimg);
        },
        error: function (data, status, e) {
            alert("上传失败！");
        },
        url: sendUrl,
        type: "post",
        dataType: "json",
        timeout: 600000
    });
};
Img_List.css 如下：
.img_list{ margin:0px; padding:0px;  overflow:hidden;}
.img_list ul,.img_list ul li{ margin:0px; padding:0px;} 
.img_list ul li{ float:left; list-style:none; position:relative; margin:5px 0px 0px 5px;}
.img_list ul li span
{ position:absolute;top:3px; right:3px; width: 16px; height: 16px; opacity: 0.6;filter: alpha(opacity=60); margin: 0 0 0 2px;
vertical-align: top; background: url(’/Themes/Images/panel_tools.png’) no-repeat -16px 0px;}
.img_list ul li img{ width:80px; height:80px; cursor:pointer; position:relative; z-index:0;}
.img_list ul li .input{ width:80px; height:80px; cursor:pointer; position:relative; left:-100px;vertical-align: top; margin:0px; padding:0px; opacity:0;filter: alpha(opacity=0); }

panel_tools.png 如下：

jia.jpg 如下：

前台页面代码：

《tr》
                        《th》图片1：《/th》
                        《td》
                            《asp:Literal ID="ltrimg_list" runat="server"》《/asp:Literal》
                            《input type="hidden" runat="server" id="ImgPath" name="ImgPath" /》
                            《span style="color:blue;"》建议尺寸(243*150)《/span》
                        《/td》
                    《/tr》
《tr》
                        《th》图片2：《/th》
                        《td》
                            《asp:Literal ID="Literal1" runat="server"》《/asp:Literal》
                          
                            《input type="hidden" runat="server" id="hkImgPath" name="hkImgPath" /》
                             《span style="color:blue;"》建议尺寸(243*150)《/span》
                        《/td》
                    《/tr》

后台初始化代码：

protected void Page_Load(object sender, EventArgs e)
        {
          
            if (!IsPostBack)
            {
               ltrimg_list.Text = UpLoad.showUploadFile("File1", "ImgPath", mfmodel.ImgPath, "img_list1");
                Literal1.Text = UpLoad.showUploadFile("File2", "hkImgPath", mfmodel.hkImgPath, "img_list2");
                   
            }
        }
        /// 《summary》
        /// 生成一个上传插件信息
        /// 《/summary》
        /// 《param name="fileId"》上传控件id《/param》
        /// 《param name="hfId"》隐藏域id用来保存上传的图片路径《/param》
        /// 《param name="imgUrl"》初始化显示的图片地址《/param》
        /// 《param name="listId"》上传成功之后用来显示上传图片的标签id《/param》
        /// 《returns》《/returns》
        public static string showUploadFile(string fileId, string hfId, string imgUrl, string listId)
        {
            string result = "";
            if (!string.IsNullOrEmpty(imgUrl))
            {
                result = "《div class=\"img_list\"》《ul id=\"" + listId + "\"》《li onmouseover=\"imgshow(this)\" onmouseout=\"imghide(this);\"》《a style=\"height:80px;width:80px;\" href=\"" + imgUrl + "\" target=\"_blank\"》《img src=\"" + imgUrl + "\" imgs=\"" + imgUrl + "\" code=\"0\" /》《/a》《span onclick=\"imgdel(’" + listId + "’,’" + fileId + "’,’" + hfId + "’)\"》《/span》《/li》《/ul》《/div》";
            }
            else
            {
                result = "《div class=\"img_list\"》《ul id=\"" + listId + "\"》《li》《img src=\"/Themes/Images/jia.jpg\" style=\"height: 80px; width: 80px;\" /》《input type=\"file\" id=\"" + fileId + "\"class=\"input\" onchange=\"ImgUpload(’" + fileId + "’,’" + hfId + "’,’" + listId + "’)\" name=\"" + fileId + "\" /》《/li》《/ul》《/div》";
            }
            return result;
        }

上传方法：

#region 上传单文件处理===================================
 46         private void SingleFile(HttpContext context)
 47         {
 48 
 49             string _refilepath = context.Request.QueryString; //取得返回的对象名称
 50             string _upfilepath = context.Request.QueryString; //取得上传的对象名称
 51             string _delfile = context.Request.QueryString;
 52             HttpPostedFile _upfile = null;
 53             try
 54             {
 55                 _upfile = context.Request.Files;
 56             }
 57             catch (Exception e)
 58             {
 59                 context.Response.Write("{\"msg\": \"0\", \"msgbox\": \"上传文件过大！\"}");
 60                 context.Response.End();
 61             }
 62             bool _iswater = false; //默认不打水印
 63             bool _isthumbnail = false; //默认不生成缩略图
 64             bool _isimage = false;
 65 
 66             if (context.Request.QueryString == "1")
 67                 _iswater = true;
 68             if (context.Request.QueryString == "1")
 69                 _isthumbnail = true;
 70             if (context.Request.QueryString == "1")
 71                 _isimage = true;
 72 
 73             if (_upfile == null)
 74             {
 75                 context.Response.Write("{\"msg\": \"0\", \"msgbox\": \"请选择要上传文件！\"}");
 76                 return;
 77             }
 78             UpLoad upFiles = new UpLoad();
 79             string msg = upFiles.fileSaveAs(_upfile, _isthumbnail, _iswater, _isimage);
 80             //删除已存在的旧文件
 81             Utils.DeleteUpFile(_delfile);
 82             //返回成功信息
 83             context.Response.Write(msg);
 84 
 85             context.Response.End();
 86         }
 87         #endregion
 
101         public string fileSaveAs(HttpPostedFile postedFile, bool isThumbnail, bool isWater, bool _isImage, bool _isReOriginal)
102         {
103             try
104             {
105                 string fileExt = Utils.GetFileExt(postedFile.FileName); //文件扩展名，不含“.”
106                 string originalFileName = postedFile.FileName.Substring(postedFile.FileName.LastIndexOf(@"\") + 1); //取得文件原名
107                 string fileName = Utils.GetRamCode() + "." + fileExt; //随机文件名
108                 string dirPath = GetUpLoadPath(); //上传目录相对路径
109 
110                 //检查文件扩展名是否合法
111                 if (!CheckFileExt(fileExt))
112                 {
113                     return "{\"msg\": \"0\", \"msgbox\": \"不允许上传" + fileExt + "类型的文件！\"}";
114                 }
115                 //检查是否必须上传图片
116                 if (_isImage && !IsImage(fileExt))
117                 {
118                     return "{\"msg\": \"0\", \"msgbox\":  \"对不起，仅允许上传图片文件！\"}";
119                 }
120                 //检查文件大小是否合法
121                 if (!CheckFileSize(fileExt, postedFile.ContentLength))
122                 {
123                     return "{\"msg\": \"0\", \"msgbox\":  \"文件超过限制的大小啦！\"}";
124                 }
125                 //获得要保存的文件路径
126                 string serverFileName = dirPath + fileName;
127                 string serverThumbnailFileName = dirPath + "small_" + fileName;
128                 string returnFileName = serverFileName;
129                 //物理完整路径                    
130                 string toFileFullPath = Utils.GetMapPath(dirPath);
131                 //检查有该路径是否就创建
132                 if (!Directory.Exists(toFileFullPath))
133                 {
134                     Directory.CreateDirectory(toFileFullPath);
135                 }
136                 //保存文件
137                 postedFile.SaveAs(toFileFullPath + fileName);
138                 //如果是图片，检查图片尺寸是否超出限制
139                 if (IsImage(fileExt))
140                 {
141                     Thumbnail.MakeThumbnailImage(toFileFullPath + fileName, toFileFullPath + fileName, 3000, 3000);
142                 }
143                 //是否生成缩略图
144                 if (IsImage(fileExt) && isThumbnail)
145                 {
146                     Thumbnail.MakeThumbnailImage(toFileFullPath + fileName, toFileFullPath + "small_" + fileName, 150, 150, "R");
147                    // returnFileName += "," + serverThumbnailFileName; //返回缩略图，以逗号分隔开
148                 }
149              
166                 /
171                 return "{\"msg\": \"1\", \"msgbox\": \"" + returnFileName + "\"}";
172             }
173             catch
174             {
175                 return "{\"msg\": \"0\", \"msgbox\":  \"上传过程中发生意外错误！\"}";
176             }
177         }

html5 获取手机摄像头与相册问题

《input type="file" accept="video/*;capture=camcorder"》
《input type="file" accept="audio/*;capture=microphone"》

之前做过微信的一些项目，在ios上使用这个file域是可以实现【拍照】和【选择相册】的

但是由于安卓机的兼容性非常糟糕，有些安卓机是可以的，有些就是不行，需要用一些app控件才可以实现

autojs获取相册所有文件夹

autojs获取相册所有文件夹用open。很多很不常见的格式比如.000等文本格式，其实都是可以用Notepad++打开，基本上都是用open来读取文件。