利用jquery-fform.js插件实现图片所见即所得效果

来源：互联网发布：node服务器优点编辑：程序博客网时间：2024/05/29 05:01

1、引入插件文件

<script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script><script type="text/javascript" src="./js/jquery-form.js"></script>

2、HTML部分

<tr>    <th>图片：</th>    <td>        <div id="imgUpload">            <input name="FImage" id="FImage" type="file">        </div>     </td></tr><tr>    <th>缩略图</th>    <td id="thumbImg"></td>    <input type="hidden" name="fileUrl" id="fileUrl" value="" /><!--用来接收后台程序返回的图片实际地址，存数据库用--></tr>
3、JS部分
$('#imgUpload').wrap('<form id="uploadForm" name="uploadForm" method="post" enctype="multipart/form-data" action="你的图片上传方法"></form>');$('#FImage').on('change',function(){    $('#uploadForm').ajaxSubmit({        dataType:'json',        success:function(data){            //alert(data.ret);            if (data.ret == 0){                //将图片显示到相应的位置                $('#thumbImg').empty();                $('#thumbImg').append("<img src='"+data.url+"' width='200px' height='200px' />");                $('#fileUrl').val(data.url);            }else{                alert('系统错误，请稍后再试');            }        },        error:function(xhr){            alert('上传失败');        }    });});
4、PHP程序部分：略

0 0