Ajaxfileupload图片上传(支持PC端、微信、手机浏览器)
2017-03-30 20:15
525 查看
在使用H5做移动端的上传文件的时候,为了快速实现图片和文件上传,学习Ajaxfileupload.js上传,觉得该js异步上传很不错,不仅能在PC端通过浏览器调用文件框选择需要上传的文件还能在微信和手机端的浏览器直接调用文件管理器,来选择文件进行上传操作;
最主要是它实现很简单,易于学习和操作;
首先使用HTML页面标签
第一步引用JS文件
前端JS调用如下:
后端采用C#代码实现:
最主要是它实现很简单,易于学习和操作;
首先使用HTML页面标签
<input type="file" id="fileDocuments" name="fileDocuments" onchange="uploadPic(this)" accept="image/*;capture=camcorder" />
第一步引用JS文件
<script src="/Scripts/ajaxfileupload.js"></script> <script src="jquery-1.7.1.js" type="text/javascript">
前端JS调用如下:
</script> <script type="text/javascript"> //上传图片 var uploadPic = function (handle) { var id = handle.id; $.ajaxFileUpload({ url: '/UserCenter/controls/Userdo.ashx',//调用后台方法 secureuri: false, //是否需要安全协议,一般设置为false fileElementId: id, dataType: 'json', data: { type: 'upload' }, success: function (data, status) { if (data.status == "success") { //方法一:直接返回路径绑定到src //var tid = "#" + id.replace("file", ""); //$(tid).val(data.msg); //$("#fileImg").attr("src", data.msg); //方法二:采用模板绑定上传后的预览位置 var str = '<li><div class="divCertificate"><em onclick="deleteCertificate(this)">×</em><img src="' + data.msg + '" alt="" /></div></li>'; $("#loadedImg").append(str); //提示信息 $.notify({ message: "图片上传成功!" }); //限制上传个数 //var certificatesImgs = $(".divCertificate"); //if (certificatesImgs.length == 4) { // $("#onaddbtn").hide(); // $("#onloadImg").hide(); //} } else { $.notify({ message: data.msg }); } }, error: function (data, status, e) {//服务器响应失败处理函数 $.notify({ message: "上传出错请重试!" + data }); } }); }; </script>
后端采用C#代码实现:
#region 文件上传 var files = context.Request.Files; if (files.Count == 0) ret = "{\"status\":\"0\",\"msg\":\"" + ret + "\"}"; else { try { //保存图片路径 var path = context.Server.MapPath("/Uploadfile/"); if (!Directory.Exists(path)) Directory.CreateDirectory(path); HttpPostedFile file = files[0]; if (file.ContentLength > 0) { var getExt = Path.GetExtension(file.FileName); //修改图片名称 var fileName = Guid.NewGuid().ToString().Replace("-", "") + getExt; var filePath = path + fileName; //保存图片 file.SaveAs(filePath); var host = context.Request.Url.Host; //返回图片路径 ret = SiteConfigManager.GetConfigStringByKey("weixinH5Domain") + "/Uploadfile/" + fileName; ret = "{\"status\":\"success\",\"msg\":\"" + ret + "\"}"; } else ret = "{\"status\":\"0\",\"msg\":\"上传图片不能为空\"}"; } catch { ret = "{\"status\":\"0\",\"msg\":\"" + ret + "\"}"; } } #endregion
相关文章推荐
- ajaxFileUpload.js 无刷新上传图片,支持多个参数同时上传,支持 ie6-ie10
- ajaxFileUpload.js 无刷新上传图片,支持多个参数同时上传
- ajaxFileUpload.js 无刷新上传图片,支持多个参数同时上传,支持 ie6-ie10
- ajaxFileUpload.js上传图片插件,全浏览器兼容,规避json错误,带文件格式大小拦截
- 浏览器图片\文件上传到服务器 ajaxfileupload.js使用实例
- ajaxFileUpload.js 无刷新上传图片,支持多个参数同时上传,支持 ie6-ie10
- java图片上传并预览,前台用jQuery插件AjaxFileUpload,后台用FileUtils.copyFile.
- Struts2中的异步提交(ajaxfileupload异步上传(图片)插件的使用)
- 推荐ajaxfilemanager for tiny_mce 比较完善的tiny_mce编辑器的图片上传及图片管理插件PHP版 支持中文
- ajaxFileUpload图片上传、限制后缀和张数 带参数
- SpringMVC ajaxFileUpload 上传图片 IE8 已测
- 使用ajaxfileupload插件实现异步上传并保存图片功能
- 利用ajaxfileupload.js实现跨域上传图片并处理返回的数据
- ajaxfileupload&amp;cropper实现图片上传与在线编辑
- SpringMVC+ajaxFileUpload上传图片 IE浏览器弹下载框问题解决方案
- 关于ajaxfileupload.js上传图片使用历程(struts2)
- ASP.NET MVC 中使用 AjaxFileUpload 插件时,上传图片后不能显示(预览)
- js 上传图片,微缩图,支持手机端,支持微信浏览器
- 解决网页异步上传图片时不断更换预览图片时数据库累积文件问题与ajaxUploadFile上传多个参数问题
- ajaxFileUplad 异步图片上传(不支持跨域)