ajaxfileupload（ajaxFileUpload 怎么传相关参数到后台）
本文目录
ajaxFileUpload 怎么传相关参数到后台
先简介一下ajaxFileUpload参数：
options参数说明：
1、url 上传处理程序地址。
2，fileElementId 需要上传的文件域的ID，即《input type=“file“》的ID。
3，secureuri 是否启用安全提交，默认为false。
4，dataType 服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
5，success 提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
6，error 提交失败自动执行的处理函数。
7，data 自定义参数。这个东西比较有用，当有数据是与上传的图片相关的时候，这个东西就要用到了。
8, type 当要提交自定义参数时，这个参数要设置成pos
$.ajaxFileUpload({ url : ’upload’,
secureuri : false, fileElementId : ’fileToUpload’,
dataType : ’json’, data : {id:id},//这种写法我在后台不管怎么取，值都为null 就去百度了一下，最后还是没有解决
success : function(data, status) { $(’#viewImg’).attr(’src’,data.picUrl);
}, error : function(data, status, e) {
alert(’上传出错’); }
})
这样就与options参数说明中data参数不符合了，最终还是没有找到原因是那点没有写正确。
jQuery插件之ajaxFileUpload
ajaxFileUpload是一个异步上传文件的jQuery插件，语法：$.ajaxFileUpload([options])。
使用方法：
第一步：先引入jQuery与ajaxFileUpload插件。注意先后顺序。
《script src=“jquery-1.7.1.js“ type=“text/javascript“》《/script》
《script src=“ajaxfileupload.js“ type=“text/javascript“》《/script》
第二步：HTML代码
第三步：JS代码第四步：后台页面upload.aspx代码。
jquery ajaxfileupload可以预览吗
使用ajaxfileupload对文件进行上传，上传完成后显示在该页上，即可以预览，想要实现该效果，只需要在上传成功之后服务端返回该图片在服务端的路径地址给前端，在ajax的success回调函数中，动态的设置页面上img节点的src属性为该地址路径即可。具体示例代码可以参考：
Html
《div class=“uploadPicture“》
《img id=“imgHead“ src=““ width=“106“ height=“122“ alt=“头像“》
《input type=“file“ onchange=“uploadHead();“ id=“basicInfoHead“ style=“display:none;“
name=“basicInfoHead“ /》
《input type=“hidden“ id=“basicHeadUrl“ 》
《a href=“#basicInfo“ id=“uploadBasicInfoHead“ 》上传头像《/a》
《/div》
Javascript
//上传头像，触发click方法
$(’#uploadBasicInfoHead’).on(’click’,function(){
$(’#basicInfoHead’).click();
});
function uploadHead(){
$.ajaxFileUpload({
url:“${pageContext.request.contextPath}/profile/uploadBasicHead“,//需要链接到服务器地址
secureuri:false,
fileElementId:“basicInfoHead“,//文件选择框的id属性
dataType: ’json’, //json
success: function (data) {
$(“#imgHead“).attr(“src“,“${pageContext.request.contextPath}/profile/readImage?imagePath=“+data.imagePath);
$(’#basicHeadUrl’).val(data.imagePath);
},error:function(XMLHttpRequest, textStatus, errorThrown){
alert(’上传失败！’);
}
});
};
备注：后端需要对应的返回上传成功的图片的url路径。
更多文章：
2024年7月5日 19:24
2024年5月19日 09:46
2023年12月11日 10:40
itudou官方下载手机版（如何用itudou下载土豆视频）
2024年7月11日 03:50
穿越火线体验服下载（mate50怎么下穿越火线枪战王者体验服）
2024年7月28日 17:16
2024年7月1日 03:46
2024年7月2日 15:58
无限看的黄app香蕉视频（想知道火蕉APP能帮助网红主播吗）
2024年6月4日 04:45
2023年9月17日 04:20
2024年6月22日 09:49
微信可以三四个人开语音会议、视频会议吗？ipad如何一边语音一边会议
2023年8月11日 06:00
2024年6月14日 08:56
火炬之光2火法师加点（火炬之光2 法师 怎么加技能点和属性点）
2023年7月18日 16:20
2024年5月1日 16:39
无法访问您试图使用的功能所在的网络位置（打开office word文档时出现 无法访问您试图使用的功能所在的网络位置，具体情形如图）
2024年6月10日 15:41
2024年7月15日 12:38
2024年5月27日 01:58
2024年5月17日 04:37
2024年7月18日 23:05
2024年8月7日 20:10
