您的位置:首页 > 其它

uploadify异步文件上传插件的用法

2017-08-28 23:27 281 查看
<!--jsp中写法-->

学生形象预览:<div id="show_file"></div>
<img id="show_img" width="50px" height="50px"/>
<!-- 					这里写普通的文件域,name值与以前相同,并在action中file  FileName保持一致 -->
<input type="file" id="uploadImg" name="upFile"/>
<!-- 						hidden用来存放真实路径的值,提交表单时,可以模型驱动对应取到值 -->
<input type="hidden" name='stuImg'/>
<br>

<!--JS中写法-->

//AJAX 异步 上传文件 不保存数据
$("#uploadImg").uploadify({
//插件自带  不可忽略的参数flash插件
'swf': '<%=request.getContextPath()%>/JS/uploadify/uploadify.swf',
//前台请求后台的url 不可忽略的参数 ******
'uploader': '<%=request.getContextPath()%>/StuActionAction_upfile.action',
//给div的进度条加背景 不可忽略******
'queueID': 'show_file',
//上传文件文件名 跟file标签 name值 保持一致******
'fileObjName' : 'upFile',
//给上传按钮设置文字
'buttonText': '上传',
//设置文件是否自动上传
'auto': true,
//可以同时选择多个文件 默认为true  不可忽略
'multi': true,
//上传后队列是否消失
'removeCompleted': true,
//队列消失时间
'removeTimeout' : 1,
//上传文件的个数,项目中一共可以上传文件的个数
'uploadLimit':  -1,
//上传文件的类型
'fileTypeExts': '*.*',
//成功回调函数 file:文件对象。data后台输出数据
'onUploadSuccess':function(file,data,response){
data = eval("("+data+")");
//图片回显, 预览
// 					注意这里定义show_img的路径时,加上newFile自定义的目录。stuImg是从后台传过来的键值对取出的
$("#show_img").attr("src","<%=request.getContextPath()%>/newFile/"+data.stuImg)
// 文本框 回填
// 					这里给隐藏的元素赋值,通过name与模型驱动对应,取到stuImg的值,提交表单时直接保存进数据库
// 					相当于stuImg="newFile/xxxxxx.jpg" 不再需要后台额外赋值保存对象stu.setStuImg(filePath)
$("[name='stuImg']").val(data.stuImg);
}

});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  uploadify 异步 插件