通过传统的form表单提交的方式上传文件：
<style> ???form a { ???????display: block; ???????width: 90px; ???????height: 40px; ???????line-height: 40px; ???????text-align: center; ???????border-radius: 5px; ???????background-color: cornflowerblue; ???????color: snow; ???????margin-bottom: 10px; ???????position: relative; ???} ???#image { ???????width: 90px; ???????position: absolute; ???????top: 0; ???????left: 0; ???????right: 0; ???????bottom: 0; ???????opacity: 0; ???} ???#image_view { ???????display: none; ???????height: 100px; ???????margin-bottom: 10px; ???}</style><form method="post" enctype="multipart/form-data"> ???<a>上传图片<input type="file" id="image" name="image"></a> ???<img id="image_view" src=""> ???<textarea id="desc" name="desc" rows="10" cols="50" placeholder="请输入图片描述..."></textarea> ???<button type="submit">发布</button></form><script src="http://code.jquery.com/jquery-latest.js"></script><script> ???$(function () { ???????$(‘#image‘).on(‘change‘, function() { ???????????/* 原理: 把本地图片路径："D:/image/..." 转为 "http://..." 格式路径进行显示图片 */ ???????????var objUrl = $(this)[0].files[0]; ???????????// 获得一个http格式的url路径: mozilla(firefox) || webkit or chrome ???????????var windowURL = window.URL || window.webkitURL; ???????????// createObjectURL创建一个指向该参数对象(图片)的URL ???????????var dataURL; ???????????dataURL = windowURL.createObjectURL(objUrl); ???????????$(‘#image_view‘).attr(‘src‘, dataURL).css(‘display‘, ‘block‘); ???????}); ???});</script>传统的form表单提交会导致页面刷新，但是在有些情况下，我们不希望页面被刷新，这种时候我们使用Ajax的方式进行请求：
<style> ???form a { ???????display: block; ???????width: 90px; ???????height: 40px; ???????line-height: 40px; ???????text-align: center; ???????border-radius: 5px; ???????background-color: cornflowerblue; ???????color: snow; ???????margin-bottom: 10px; ???????position: relative; ???} ???#image { ???????width: 90px; ???????position: absolute; ???????top: 0; ???????left: 0; ???????right: 0; ???????bottom: 0; ???????opacity: 0; ???} ???#image_view { ???????display: none; ???????height: 100px; ???????margin-bottom: 10px; ???}</style><form> ???<a>上传图片<input type="file" id="image" name="image"></a> ???<img id="image_view" src=""> ???<textarea id="desc" name="desc" rows="10" cols="50" placeholder="请输入图片描述..."></textarea> ???<button type="button" id="publish">发布</button></form><script src="http://code.jquery.com/jquery-latest.js"></script><script> ???$(function () { ???????$(‘#image‘).on(‘change‘, function () { ???????????/* 原理: 把本地图片路径："D:/image/..." 转为 "http://..." 格式路径进行显示图片 */ ???????????var objUrl = $(this)[0].files[0]; ???????????// 获得一个http格式的url路径: mozilla(firefox) || webkit or chrome ???????????var windowURL = window.URL || window.webkitURL; ???????????// createObjectURL创建一个指向该参数对象(图片)的URL ???????????var dataURL; ???????????dataURL = windowURL.createObjectURL(objUrl); ???????????$(‘#image_view‘).attr(‘src‘, dataURL).css(‘display‘, ‘block‘); ???????}); ???????$(‘#publish‘).on(‘click‘, function () { ???????????var formData = new FormData($(‘form‘)[0]); ???????????// var formData = new FormData(); ???????????// formData.append(‘image‘, $(‘#image‘)[0].files[0]); ???????????// formData.append(‘desc‘, $(‘#desc‘).val()); ???????????$.ajax({ ???????????????url: ‘/index/‘, ???????????????type: ‘post‘, ???????????????data: formData, ???????????????contentType: false, ???????????????processData: false, ???????????????success: function (msg) { ???????????????????// 提示信息 ???????????????} ???????????}); ???????}); ???});</script>注：$(‘form‘).serialize()可以对form表单进行序列化，从而将form表单中的参数传递到服务端（创建以标准 URL 编码表示的文本字符串的方式）。只能传递一般的参数，上传文件的文件流是无法被序列化并传递的。
Ajax 上传文件
原文地址：http://www.cnblogs.com/liuxiaowei/p/8081644.html