怎么用js或者是jquery写出点击图片可以上传本地图片

类似于这个图片，一点击就可以从本地上传图片，需要带样式。不想要显示input文本域的样式

ajaxFileUpload插件 或则有$.post 结合formdATA

$(".file-up").change(function(){
var filePath = $(this).val();
var fileName = filePath.substring(filePath.lastIndexOf("."),filePath.length);
if(!/.(jpg|png)/.test(fileName)){
alert("文件格式不支持，请选择要上传的图片!");
$(".file-up").val('');
}else{
$(this).parent().parent().find("img").attr("src",filePath);
ajaxFileUpload($(this).attr("id"));
}
});

//上传
function ajaxFileUpload(fileId){
var dom = $("#"+fileId).parent().parent().find("img");
var domp = $("#"+fileId).parent();
var domhid = $("#"+fileId).parent().parent().find("input[type='hidden']");
dom.attr("src","/loading.gif");
$.ajaxFileUpload({
url:'${ctx }/loan/uploadImage',
secureuri:false,
fileElementId: fileId,
dataType: 'json',
success: function (data, status){
if(JSON.parse(data).status == "success"){
dom.attr("src",JSON.parse(data).path);
domhid.val(JSON.parse(data).path);
domp.parent().parent().find('.p-big').removeClass("hide");
}
},
error: function (data, status, e){
alert("上传失败！");
}
});
domp.empty();
domp.append('');
domp.on('change','.file-up',function(){
var filePath = $(this).val();
var fileName = filePath.substring(filePath.lastIndexOf("."),filePath.length);
if(!/.(jpg|png)/.test(fileName)){
alert('文件格式不支持，请选择要上传的图片！');
}else{
fileId = $(this).attr("id");
dom = $("#"+fileId).parent().parent().find("img");
domp = $("#"+fileId).parent();
domhid = $("#"+fileId).parent().parent().find("input[type='hidden']");
dom.attr("src","/loading.gif");
$.ajaxFileUpload({
url:'${ctx }/loan/uploadImage',
secureuri:false,
fileElementId:fileId,
dataType: 'json',
success: function (data, status){
if(JSON.parse(data).status == "success"){
dom.attr("src",JSON.parse(data).path);
domhid.val(JSON.parse(data).path);
domp.parent().parent().find('.p-big').removeClass("hide");
}
},
error: function (data, status, e){
alert("上传失败！");
}
});
}
});
}

文件上传一定要file，你不想用file的样式，可以自己弄一张图片，然后一个透明file浮动到图片上，

DEMO：自定义上传控件样式
多文件选择上传jquery插件

采用 表单模式 上传
<!-- 上传图片，只将图片上传到tomcat服务器里面 -->

账号：

密码：

上传图像:

然后在servlet中代码：
public void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    //一个接参数的数组
    String[] form = new String[4];//存储用户名和密码


    //request.getParameter("file");
    DiskFileItemFactory dff = new DiskFileItemFactory();
    dff.setSizeThreshold(4096);//设置缓存为4K
    dff.setRepository(new File("d:/"));//将缓存放到D盘根目录

    ServletFileUpload  upload =new ServletFileUpload(dff);
    try {
        List<FileItem> items =upload.parseRequest(request);
        for(int i = 0;i<items.size();i++){
            FileItem item = items.get(i);
            //下面两名都是request.getParameter("file");因为enctype="multipart/form-data"没有参数，只能下面方式写
            //System.out.println(item.getName());//得到上传文件框名字
            //System.out.println(item.getString());//得到非上传文件框名字
            if(item.isFormField()){//如果是表单元素，比如用户名——密码
                form[i]  = item.getString();//得到非上传文件框名字
            }else{//是上传框
                //上传到服务器：服务器在哪呢？
                //System.out.println(getServletContext().getRealPath("/"));
                //写这个File所在的位置
                form[i] = "images/"+Math.round(Math.random()*10)+".png";//存储上传的这张图片在服务器的名字
                File file = new File(getServletContext().getRealPath("/")+form[i]);//写在这个地址里面
                    item.write(file);
            }
        }
    } catch (FileUploadException e) {
        e.printStackTrace();
    } catch (Exception e) {
        e.printStackTrace();
    }
    userinfo = new Userinfo();
    userinfo.setUserid(form[0]);
    userinfo.setUserpwd(form[1]);
    userinfo.setUserimg(form[2]);

    dao  = new UserinfoImpl();
    if(dao.saveUserinfo(userinfo)){
        dao = new UserinfoImpl();
        request.setAttribute("userinfos", dao.getUserinfos());          
        request.getRequestDispatcher("success.jsp").forward(request, response);
    }else{
        response.sendRedirect("fail.jsp");
    }

<form action="ServletUpload" method="post" enctype="multipart/form-data">
    账号：<input type="text" name="userid"/><br/>
    密码：<input type="password" name="userpwd"/><br/>
    上传图像:
    <input type="file" name="file"/><br/>
    <input type="submit" value="确定"/>
</form>