总结--上传插件Upload.js的使用

最近用了一个上传的插件，趁热总结一下
原文链接
简单说一下，这个插件可以上传很多种类型的文件，兼容性也可以，我这里只用到了图片的上传，所以就说这个功能了。先说一下上传图片的大致逻辑：
1.前端选中图片上传到服务器
2.服务器会自动返回图片在服务器的路径，在这个事件里面
3.将路径赋值给需要用到的地方
话不多说，上代码：

 <p class="upload_businessImg"><button type="button" id="upload_businessImg_btn" class="upload_businessImg_btn">上传</button>请上传营业执照扫描件或照片，<span class="businessImg_err_tip">图片格式JPEG、PNG、JPG、GIF，文件大小2M以内。</span><input id="imgtoken" type="hidden" name="imgtoken" value=""><!--作为参数放在上传路径后面，看需求，可以没有这个参数，如果需求需要，则不能为空  如果为空会返回错误信息    意思是说 “令牌解析错误”  每个公司的项目里应该都有这个，是后端给出来的--><input id="supplierid" type="hidden" name="supplierid" value=""><!--作为参数放在上传路径后面，看需求，可以没有这个参数，如果需求需要，则不能为空，如果为空会返回错误信息    意思是说 “用户权限受阻”  这个根据个人情况而定，每个公司的项目里应该都有这个，是后端给出来的--><input id="functionname" type="hidden" name="functionname" value="ablu"><!-- 功能名 ，作为参数放在上传路径后面，看需求，可以没有这个参数，如果需求需要，则不能为空，   如果为空会返回错误信息  “the function is not registered!”  意思是说 “该函数未注册！” --></p><!--下面是预览图片的框，只有一个框，当然也可以有多个框 --><div class="isshow_preview_mask businessImg"><img id="businessImgSrc" src="" alt=""><div class="businessImg_mask"><div class="button_box"><button type="button" class="see_businessImg j_view_image">查看</button><button type="button" class="delt_businessImg del_img">删除</button></div></div></diiv>

参数说明图片：

// 初始化上传事件$(document).ready(function(){initUploadify_businessImg();});// 判断图片格式及大小function judgePictureFormatSize( filType, err_tip, file_size ){if(filType == "jpg" || filType == "jpeg" || filType == "png" || filType == "gif" || file_size < 2 * 1024 * 1024){err_tip.css("color","#999");return true;}else{err_tip.css("color","#FF001A");return false;}};// 上传图片function initUploadify_businessImg() {//一下各种参数的说明可以从顶部链接找到，或者看上面添加的图片var setting = {runtimes: 'html5,flash,silverlight,html4',    //默认"html5,flash,silverlight", 用来指定上传方式，指定多个上传方式请使用逗号隔开。一般情况下，你不需要配置该参数，因为Plupload默认会根据你的其他的参数配置来选择 最合适的上传方式。如果没有特殊要求的话，Plupload会首先选择html5上传方式，如果浏览器不支持html5，则会使用flash或 silverlight，如果前面两者也都不支持，则会使用最传统的html4上传方式。如果你想指定使用某个上传方式，或改变上传方式的优先顺序，则你 可以配置该参数。browse_button: 'upload_businessImg_btn', //触发文件选择对话框的DOM元素，当点击该元素后便后弹出文件选择对话框。该值可以是DOM元素对象本身，也可以是该DOM元素的idcontainer: $('#upload_businessImg_btn').parent()[0],       //用来指定Plupload所创建的html结构的父容器，默认为前面指定的browse_button的父元素。该参数的值可以是一个元素的id,也可以是DOM元素本身。url: '',    //这里的路径就是上传图片的基础路径，比如：https://XXX.XXX.com/uploadfile,路径后面要跟参数，见下面 uploader.setOptionmultipart: true,       //为true时将以multipart/form-data的形式来上传文件，为false 时则以二进制的格式来上传文件。html4上传方式不支持以二进制格式来上传文件，在flash上传方式中，二进制上传也有点问题。并且二进制格式上传还 需要在服务器端做特殊的处理。一般我们用multipart/form-data的形式来上传文件就足够了。http_method: 'get', multi_selection: true,  //是否可以在文件浏览对话框中选择多个文件，true为可以，false为不可以。默认true，即可以选择多个文件。需要注意的是，在某些不支持 多选文件的环境中，默认值是false。比如在ios7的safari浏览器中，由于存在bug，造成不能多选文件。当然，在html4上传方式中，也是 无法多选文件的。filters: {mime_types : [ //只允许上传图片{ title : "Image files", extensions : "jpg,gif,png,jpeg" }],max_file_size : '2048kb', //最大只能上传2048kb的文件},file_data_name: 'file',flash_swf_url: 'js/Moxie.swf',   //这个文件可以从本文章顶部的链接里面找，下载下来，文件的路径可以是相对的，也可以是绝对的silverlight_xap_url: 'js/Moxie.xap',    //同上init: {PostInit: function(uploader) {$('filelist').innerHTML = '';$('uploadfiles').onclick = function() {uploader.start();return false;};},FilesAdded: function(uploader, files) {plupload.each(files, function(file) {var filType =  file.name ?  file.name.split('.') : [] ; var imgtoken = $("#imgtoken").val();var functionname = $("#functionname").val();var supplierid = $('#supplierid').val();var businessImg_err_tip = $(".businessImg_err_tip");if( judgePictureFormatSize( filType, businessImg_err_tip, file.size ) ){uploader.setOption({url:"https://upload.dhgate.com/uploadfile?functionname=" + functionname + "&supplierid=" + supplierid + "&token=" + imgtoken}); uploader.start();}else{return false;}});},FileUploaded: function(uploader, file, responseObject) {if (responseObject != "") {var s_value = window.eval("(" + responseObject.response + ")");var imgurl = s_value.l_imgurl;var businessImg_src = $("#businessImgSrc").attr("src");console.log(s_value)if( imgurl == null || undefined || "" ){$(".businessImg_upload_err").text("抱歉，图片上传失败，请稍后再试。");$("#businessImg_box").find("img[src='']").attr("src","");}else{$(".businessImg_upload_err").text("");if ( businessImg_src == "" ) {businessImg_src = imgBaseUlr + "" + imgurl;$("#businessImgSrc").attr("src",businessImg_src);}} }},Error: function(uploader, err) {$.each(uploader.files, function() {$(".businessImg_upload_err").text("抱歉，图片上传失败，请稍后再试。");})return false}}}}

要说坑的话，我遇到的是上面那几个隐藏域的input，基于业务需求传递参数，后台获取的参数到没什么，就是那个functionnme比较难搞，需要在公司某个系统里先注册，完了把functionname的值（也就是注册的事件名称）当作参数传回去作为验证。

总结--上传插件Upload.js的使用相关推荐

ipad html 自定义裁剪图片大小,移动端图片裁剪上传插件 Mavatar.js(原创)
插件描述:移动端头像上传,支撑头像预览和放大缩小平移,内置上传至后端请求方法. 注:请在移动端用手势查看缩放效果,PC端无法缩放 Mavatar 移动端头像上传,支撑头像预览和放大缩小平移,内置上传至 ...
jquery 分片上传php,jquery 大文件分片上传插件 fcup.js
软件介绍 fcup.js fcup 是一款支持大文件切片上传插件.该jquery插件使用简单,配置简单明了,支持上传类型指定,进度条查看上传进度.. 安装直接下载源码,上传功能需要php环境,演示地 ...
上传插件dropzone.js实例
dropzone.js默认是Ajax上传图片给服务器,那么如何获取到图片名呢?其实我们是可以通过dropzone的success函数获取到服务器返回的数据 dropzone.js在HTML的配置如下: ...
dropzone java实例_上传插件dropzone.js实例
dropzone.js默认是Ajax上传图片给服务器,那么如何获取到图片名呢?其实我们是可以通过dropzone的success函数获取到服务器返回的数据 dropzone.js在HTML的配置如下: ...
java ajax多文件上传插件_ajaxFileUpload.js插件支持多文件上传的方法
前提条件: ajaxFileUpload.js插件多文件上传步骤: 1.修改源码,(源码只支持单个文件的上传): //修改前代码------- //var oldElement = jQuery(' ...
JavaScript 文件拖拽上传插件 dropzone.js 介绍
dropzone.js 是一个开源的 JavaScript 库,提供 AJAX 异步上传功能. 安装下载dropzone.js文件并添加到页面中即可.Dropzone 不依赖 jQuery 框架. ...
php dropzone.js中文教程,JavaScript 文件拖拽上传插件 dropzone.js 介绍
dropzone.js 是一个开源的 JavaScript 库,提供 AJAX 异步上传功能. 安装下载dropzone.js文件并添加到页面中即可.Dropzone 不依赖 jQuery 框架. ...
js插件---IUpload文件上传插件（包括图片）
js插件---IUpload文件上传插件(包括图片) 一.总结一句话总结:上传插件找到真正上传位置的代码,这样就可以知道整个上传插件的逻辑了, 找资料还是github+官方 1.如何在js中找到真正 ...
fileupload的回调方法_jQuery File Upload文件上传插件使用详解
本篇教程介绍了jQuery File Upload文件上传插件使用详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < jQuery File Upload 是一个 ...
ajax 批量上传图片插件,jQuery多文件上传插件jquery.imageuploader.js
插件描述:jQuery多文件上传插件jquery.imageuploader.js,可以同时上传多个文件并支持拖拽上传 jquery.imageuploader.js 一款jquery多文件上传插件. ...

总结--上传插件Upload.js的使用

总结--上传插件Upload.js的使用相关推荐

最新文章

热门文章