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

最新推荐文章于 2022-11-20 19:06:33 发布

原创最新推荐文章于 2022-11-20 19:06:33 发布 · 643 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery-form #图片上传 #所见即所得

javascript 专栏收录该内容

1 篇文章

订阅专栏

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程序部分：略