环境:VS2012
uploadify版本:2.1.4(参数与3.0以上版本有所不同)
在项目开发过程中,文件上传往往伴随着其他字段一起提交,这里通过uploadify动态传递参数,分享一个简单的例子。
页面:
html:(字段太多,截取部分)
<tr> <th> <label for="name">姓名:</label></th> <td> <input type="text" id="name" name="name" /></td> </tr> <tr> <th> <label for="sex">性别:</label></th> <td> <input type="radio" id="male" name="sex" checked="checked" value="男" />男 <input type="radio" id="female" name="sex" value="女" />女 </td> </tr>
<tr> <th> <label for="resume">上传简历:</label></th> <td> <input type="file" id="uploadify" name="uploadify" /> </td> </tr> <tr> <th></th> <td> <input type="button" class="btn btn_orange btn_large" value="投递简历" onclick="sub_Click()" id="sub" /> </td> </tr>
JS:
<link href="../../js/jquery.uploadify-v2.1.4/uploadify.css" rel="stylesheet" /> <script type="text/javascript" src="../../system/Scripts/jquery-1.11.3.min.js"></script> <script src="../../js/jquery.uploadify-v2.1.4/swfobject.js"></script> <script src="../../js/jquery.uploadify-v2.1.4/jquery.uploadify.v2.1.4.js"></script> <script type="text/javascript"> $(function () { $("#uploadify").uploadify({ 'uploader': '../../js/jquery.uploadify-v2.1.4/uploadify.swf', 'script': '../../DataServices/Resume.ashx?', 'cancelImg': '../../js/jquery.uploadify-v2.1.4/cancel.png', 'scriptData': { 'type': 'submitResume' }, 'folder': 'resumeFile', 'method': 'GET', 'fileExt': '*.doc; *.docx; *.pdf', 'fileDesc':'请上传word或pdf文件', 'auto': false, 'buttonImg': '../../js/jquery.uploadify-v2.1.4/select_file.png', 'onComplete': function (event, ID, fileObj, response, data) { if (response == "0") { alert("请上传简历!"); } else if (response == "false") { alert("系统错误,请通过其他途径投递!"); } else if (response == "true") { alert("投递成功!"); window.location.reload(); } } }); }); function sub_Click() { if ($("#uploadify").val() == "") { alert("请上传简历!"); } $('#uploadify').uploadifySettings('scriptData', { 'name': $('#name').val(), 'sex': $("input[name='sex']:checked").val(), 'mobile': $('#mobile').val(), 'email': $('#email').val(), 'school': $('#school').val(), 'major': $('#major').val(), 'education': $('#education option:selected').val(), 'job': $('#job option:selected').val() }); $("#uploadify").uploadifyUpload(); } </script>通过uploadifySettings给其他设置参数,在后台中,只需获取各个参数即可,如string name = context.Request.QueryString["name"]。