私は誰もがウェブ開発をしているときにファイルのアップロードとプレビューの問題に遭遇すると思います。今回私がpluploadを選択した理由は非常に単純です。フラッシュに依存せず、html5、flash、silverlight、html4をサポートしています。互換性は非常によく、ユーザーエクスペリエンスは良好です。プラグインをダウンロードしなくても使用できます。それが理由です。さて、一緒に実装プロセスを見てみましょう。
1.実現のアイデア
プロセス全体を2つのステップで実現する必要があります。アップロードとプレビューです。
1.アップロード：この手順は理解しやすいです。つまり、ユーザーが画像を選択した後、その画像をサーバーにアップロードします。これは公式のAPIを見れば実現できると思います。
2.プレビュー：アップロードが完了したら、サーバーにアップロードされた画像のパスをフロントエンドページに返す必要があります。プレビューを完了するためのパスを取得したら、imgのsrc属性を変更できます。
第二に、ソースコードの実装
<script type="text/javascript">
$(function () {
var uploader = new plupload.Uploader({
runtimes: 'html5,flash,silverlight,html4',
browse_button: 'file_upload', //触发文件选择
//container: document.getElementById('file_upload'),
url: '../../../ComService/HandlerUploadify.ashx?action=UP',
flash_swf_url: '../../Content/js/plupload-2.3.6/js/Moxie.swf',
silverlight_xap_url: '../../Content/js/plupload-2.3.6/js/Moxie.xap',
filters: {
max_file_size: '40mb',
mime_types: [
{ title: "Image files", extensions: "jpg,gif,png" }
]
},
init: {
FilesAdded: function (up, files) {
plupload.each(files, function (file) {
uploader.start(); //自动上传
});
},
FileUploaded: function (uploader, file, responseObject) {
var pic = decodeURIComponent(responseObject.response.substr(responseObject.response.lastIndexOf("%")));
var url = "..\\..\\Content\\img\\samplePic" + pic;
$("#pic_view").attr("src", url);
$("#F_pictureSysURL").val($("#pic_view").attr("src"));
$("#F_pictureSysURL").text($("#pic_view").attr("src"));
}
}
});
uploader.init();
});
</script> <div style="text-align: center;">
<img id="pic_view" alt="图片预览" style="width: 220px;height: 120px;" />
<div id="uploadfileQueue" style="padding: 3px; width: 220px; display:none;">
</div>
<div id="file_uploadDiv" style="margin: 8px auto !important; width: 75px;">
<div id="file_upload" style="background: #f1bd23;padding: 5px;">
上传
</div>
</div>
</div>3、レンダリングの実現
4つ以上
これは小さな詳細です。つまり、ユーザーが閉じるボタンをクリックすると、データの冗長性が回避され、サーバー上の画像を削除する必要があります。
別の言い方をすれば、現在のH5はすでにローカルリソースにアクセスできるため、ユーザーがファイルを選択すると、サーバーにアップロードすることなく、プレビューを直接実現できます。
ローカルプレビューの実装バージョンが必要な場合は、
uploadifyの実装バージョンが必要な場合は、
webuploaderの実装バージョンが必要な場合は、
.NETバージョンのバックグラウンドコードが必要な場合は、
JAVAバージョンのバックグラウンドコードが必要な場合...
私たちの拠点に参加できます。拠点の住所は450342630（QQグループ番号）です。