标签：
如此这样：
<html> <head> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/jquery.form.js"></script> <script type="text/javascript"> function addPic(){ $("#uploadImage").click(); } function asycUploadImage() { var value = $("#uploadImage").val(); var extend = value.substring(value.lastIndexOf(".")+1).toLowerCase(); if (extend != ‘jpg‘ && extend != ‘jpeg‘ && extend != ‘png‘ && extend != ‘pic‘) { alert("图片格式不正确"); return false; } var reader = new FileReader(); reader.onload = function(e){ // 做一些什么事 var someHtml = ‘‘; someHtml += ‘<img src="‘+ e.target.result +‘">‘; $(‘.scroll‘).append(someHtml); // 滚动到最底部 var div = $(".wrapper")[0]; div.scrollTop = div.scrollHeight } reader.readAsDataURL(document.getElementById("uploadImage").files[0]); var options = { url : "some.json", dataType : "json", type : "post", cache : false, success : function(data){ } } $("#uploadImageForm").ajaxSubmit(options); } </script> </head> <body> <div class="wrapper"> <div class="scroll"></div> </div> <form id="uploadImageForm"> <input id="uploadImage" type="file" name="multipartFile" onchange="asycUploadImage()" style="display:none;" /> </form> <div><img src="some.png" onclick="addPic()">点我选择图片</div> </body> </html>
1. 点击其他元素，间接触发选择文件。
2. 显示到本地
3. ajax异步上传到服务器
4. 返回url
标签：
原文地址：http://www.cnblogs.com/zno2/p/5074043.html
